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实现前端分页功能
Mar 23 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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与paypal整合方法
2010/11/28 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
基层工作经历证明
2014/01/13 职场文书
就业自我评价
2014/02/04 职场文书
汽车促销活动方案
2014/03/31 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers