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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
js格式化时间的简单实例
Nov 27 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
微信小程序自定义可滑动日历界面
Dec 28 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
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python创建线程示例
2014/05/06 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
python使用zip将list转为json的方法
2018/12/31 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
pygame实现打字游戏
2021/02/19 Python
Python中base64与xml取值结合问题
2019/12/22 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
青年文明号事迹材料
2014/01/18 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
民主生活会发言材料
2014/10/20 职场文书
总经理检讨书范文
2015/02/16 职场文书