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 相关文章推荐
javascript操作JSON的要领总结
Dec 09 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
js倒计时抢购实例
Dec 20 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
vue axios用法教程详解
Jul 23 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
原生JS实现的碰撞检测功能示例
May 18 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 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去除字符串中空字符的常用方法小结
2015/03/17 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python pickle模块用法实例分析
2015/05/27 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
党员创先争优公开承诺书
2014/03/28 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
驾驶员培训方案
2014/05/01 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
文明单位申报材料
2014/12/23 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Python语言内置数据类型
2022/02/24 Python