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向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
js实现三角形粒子运动
Sep 22 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更快的提供文件下载的代码
2012/06/13 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python实现基本线性数据结构
2016/08/22 Python
python和ruby,我选谁?
2017/09/13 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
使用Python实现音频双通道分离
2020/12/25 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
双方协议书
2014/04/22 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
Python之基础函数案例详解
2021/08/30 Python