jQuery中 DOM节点操作方法大全


Posted in jQuery onOctober 12, 2017

append(content | fn):向每个匹配的元素内部追加内容。参考:http://jquery.cuishifeng.cn/append.html

例如:向所有段落中追加一些HTML标记。

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo():这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中

例如:把所有段落追加到ID值为foo的元素中。

<p>I would like to say: </p>
<div></div><div></div>
$("p").appendTo("div");
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend():向每个匹配的元素内部前置内容

例如:向所有段落中前置一些HTML标记代码。

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content):

把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

例如:把所有段落追加到ID值为foo的元素中。

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
<div id="foo"><p>I would like to say: </p></div>

after():在每个匹配的元素之后插入内容。插入的元素和被插入的元素属于同一级,非父子级关系

例如:在所有段落之后插入一些HTML标记代码。

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

before():在每个匹配的元素之前插入内容。

例如:在所有段落之前插入一些HTML标记代码

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter():把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面

例如:把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

<p>I would like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore():把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

例如:把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><div id="foo">Hello</div>

wrap():把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

例如:用于包装目标元素的DOM元素

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
</div>
$('.inner').wrap(function() {
 return '<div class="' + $(this).text() + '" />';
});
<div class="container">
 <div class="Hello">
  <div class="inner">Hello</div>
 </div>
 <div class="Goodbye">
  <div class="inner">Goodbye</div>
 </div>
</div>

unwrap():这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

例如:用ID是"content"的div将每一个段落包裹起来

<div>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</div>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll():将所有匹配的元素用单个元素包裹起来

这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

例如:用一个生成的div将所有段落包裹起来

$("p").wrapAll("<div></div>");

或者

$("p").wrapAll(document.createElement("div"));

总结

以上所述是小编给大家介绍的jQuery中 DOM节点操作方法大全,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery自动或手动图片切换效果
Oct 11 #jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
jQuery中extend函数简单用法示例
Oct 11 #jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
jQuery实现的form转json经典示例
Oct 10 #jQuery
You might like
Linux下php5.4启动脚本
2014/08/03 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python3操作mysql数据库的方法
2017/06/23 Python
python用户管理系统的实例讲解
2017/12/23 Python
python pandas时序处理相关功能详解
2019/07/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python字典dict常用方法函数实例
2020/11/09 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
20岁生日感言
2014/01/13 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
庆六一活动总结
2014/08/29 职场文书
专项资金申请报告
2015/05/15 职场文书
大学生活感想
2015/08/10 职场文书
调解协议书范本
2016/03/21 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python