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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php 错误处理经验分享
2011/10/11 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python实现贪吃蛇小游戏
2020/03/21 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
Internet体系结构
2014/12/21 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
社区学习十八大感想
2014/01/22 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
复兴之路观后感
2015/06/02 职场文书