jQuery DOM节点操作

最新推荐文章于 2020-11-14 00:46:39 发布

赤哲～

最新推荐文章于 2020-11-14 00:46:39 发布

阅读量591

点赞数

分类专栏： jQuery基础文章标签： jquery DOM节点

本文链接：https://blog.youkuaiyun.com/weixin_44540247/article/details/105862806

版权

jQuery基础专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了jQuery中DOM节点的操作，包括内部插入、外部插入和删除。重点讲解了append(), prepend(), after(), before(), insertAfter(), insertBefore(), empty(), remove()和detach()等方法的用法，简化了原生JavaScript中的DOM操作。" 88714754,8434020,旅游网站开发与设计实践,"['网站建设', '网站设计', '旅游服务', '电子商务', '用户体验']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM节点的操作对于原生Js来说就是通过document.createElement()来创建元素，然后通过setAttribute()创建元素的属性和设置属性值。如果要添加一下内容则通过innerHTML()方法给元素添加内容。最后通过appendChild()将该元素添加到body里面或者添加到某个元素里面。
在这里插入图片描述
而jQuery对节点操作就不用这么客观、繁琐。jQuery可以直接通过一个append()方法以字符串形式将标签以及需要添加的属性和内容等等直接作为append参数添加到body或者其他元素内。

节点的操作并非只有这样.在jQuery中，对节点的操作划分了三块：
一、 DOM节点内部插入
内部插入就是选择到某个元素，给其内部添加元素。
内部插入的方法有四种：

append()
选择到元素，然后通过append()方法以字符串形式将标签以及需要添加的属性和内容等等直接作为append参数添加到选择元素内。

该方法插入的节点位置会在选择元素内的最后面出现。
appendTo()
使用英文状态下的“$”符号匹配用来插入的标签元素以及需要添加的属性和内容等等，通过appendTo()方法添加到选择元素内。

该方法插入的节点位置会在选择元素内的最后面出现。
prepend()
选择到元素，然后通过prepend()方法以字符串形式将标签以及需要添加的属性和内容等等直接作为prepend参数添加到选择元素内。

该方法插入的节点位置会在选择元素内的第一个出现。
prependTo()
使用英文状态下的“$”符号匹配用来插入的标签元素以及需要添加的属性和内容等等，通过prependTo()方法添加到选择元素内。

该方法插入的节点位置会在选择元素内的第一个出现。

二、 DOM节点外部插入
外部插入就是选择到某个元素，给其外部插入元素。
外部插入的方法有四种：
1.after()
选择到元素，然后通过after()方法以字符串形式将标签以及需要添加的属性和内容等等直接作为after参数添加到选择元素外。

该方法插入的节点位置会在选择元素的下方出现，并且利用该方法多次插入节点，越是最新插入的节点离选择元素越近。

2.before()
选择到元素，然后通过before()方法以字符串形式将标签以及需要添加的属性和内容等等直接作为before参数添加的选择元素外。

该方法插入的节点位置会在选择元素的上方出现，并且利用该方法多次插入节点，越是最新插入的节点离选择元素越近。

3.insertAfter()
使用英文状态下的“$”符号匹配用来插入的标签元素以及需要添加的属性和内容等等，通过insertAfter()方法添加到选择元素外。

该方法插入的节点位置会在选择元素的下方出现，并且利用该方法多次插入节点，越是最新插入的节点离选择元素越接近。

4.insertBefore()
使用英文状态下的“$” 符号匹配用来插入的标签元素以及需要添加的属性和内容等等，通过insertBefore ()方法添加到选择元素外。

该方法插入的节点位置会在选择元素的上方出现，并且利用该方法多次插入节点，越是最新插入的节点离选择元素越接近。

三、 DOM节点的删除
在jQuery中节点的删除有三种方法：
1.empty()
通过该方法，可以将所选择元素中的所有子节点全部删除。

2.remove()
通过该方法，可以将DOM中所有匹配的元素全部删除。

3.detach()
该方法并不能达到删除的效果，只能将元素移除，但该元素绑定的所有事件、附加的数据等等全都会保留下来。移除仅仅是显示效果没有了，但内存中还是存在的，当你使用append()方法之后，该元素又会回到文档流中（原模原样显示回来）。