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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
smarty半小时快速上手入门教程
2014/10/27 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
如何利用python进行时间序列分析
2020/08/04 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
复古服装:RetroStage
2019/05/10 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers