jquery 添加节点的几种方法介绍


Posted in Javascript onSeptember 04, 2013
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery插入,复制、替换和删除节点</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//几种添加节点的方法 
//$("p").append("<b>你好吗?</b>");//向p元素中追加《b》 
//$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中 
//$("p").prepend("<b>你好吗?</b>");//向p中前置《b》 
//$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中 
//$("p").after("<b>你好吗?</b>");//向p元素后插入《b》 
//$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边 
//$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》 
//$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面 
//几种删除节点的方法 
//var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
//$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
//$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
//$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 
//复制节点 
/* $("ul li").click(function(){ 
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件 
}); 
*/ 
//替换节点 
// $("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>"); 

}); 
</script> 
</head> 
<body> 
<p>你好!</p> 
你最喜欢的水果是? 
<ul> 
<li title="苹果">苹果</li> 
<li title="橘子">橘子</li> 
<li title="菠萝">菠萝</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
JS实现可控制的进度条
Mar 25 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 #Javascript
JScript分割字符串示例代码
Sep 04 #Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 #Javascript
JS实现图片横向滚动效果示例代码
Sep 04 #Javascript
javascript强大的日期函数代码分享
Sep 04 #Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 #Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python实现Linux命令xxd -i功能
2016/03/06 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
详解Python IO编程
2020/07/24 Python
Python3.9新特性详解
2020/10/10 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
暑期社会实践学生的自我评价
2014/01/09 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python