jQuery:节点(插入,复制,替换,删除)操作


Posted in Javascript onMarch 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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js格式化时间的方法
Dec 18 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
You might like
php导出word格式数据的代码实例
2013/11/25 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python中实现的RC4算法
2015/02/14 Python
Python CSV模块使用实例
2015/04/09 Python
python使用turtle库绘制时钟
2020/03/25 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
情侣吵架检讨书
2014/02/05 职场文书
有趣的广告词
2014/03/18 职场文书
食品安全工作方案
2014/05/07 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
赡养老人协议书范本
2015/08/06 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js