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 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
JavaScript实现原型封装轮播图
Dec 27 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实现链结人气统计
2006/10/09 PHP
一篇不错的PHP基础学习笔记
2007/03/18 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python分割列表(list)的方法示例
2017/05/07 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
详解如何减少python内存的消耗
2019/08/09 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
教育技术学专业职业规划书
2014/03/03 职场文书
校园元旦活动总结
2014/07/09 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
涨价通知
2015/04/23 职场文书
大学生村官入党自传
2015/06/26 职场文书
初中地理教学反思
2016/02/19 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书