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 相关文章推荐
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js调试系列 初识控制台
Jun 18 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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通过COM类调用组件的实现代码
2012/01/11 PHP
php mail to 配置详解
2014/01/16 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
详解前后端分离之VueJS前端
2017/05/24 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python全排列操作实例分析
2018/07/24 Python
Django框架 querySet功能解析
2019/09/04 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
欢迎词范文
2015/01/27 职场文书
限期整改通知书
2015/04/22 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
退休欢送会致辞
2015/07/31 职场文书
敬老院活动感想
2015/08/07 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers