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实现限制textarea输入字数的方法
Sep 06 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
vue配置多代理服务接口地址操作
2020/09/08 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python素数筛选法浅析
2018/03/19 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
基于FME使用Python过程图解
2020/05/13 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
幼儿园安全检查制度
2014/01/30 职场文书
中学教师请假制度
2014/02/03 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
大学运动会入场词
2014/02/22 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
写给医生的感谢信
2015/01/22 职场文书
详解Django的MVT设计模式
2021/04/29 Python