本文详细介绍了jQuery中的内容追加和节点移除操作。内容追加包括内部内容追加和节点追加，如appendTo、append、prepend和prependTo等方法，以及它们在实际应用中的效果和顺序差异。节点移除则涉及empty()和remove()方法，前者清除子节点，后者移除整个节点。
jQuery的追加主要分为两种：第一种内部内容追加，第二种节点追加；jQuery的节点移除也分为两种一种是清空子节点，而另一种则是移除整个节点
- 内部内容追加
首先在<body>标签内创建好要追加内容的父元素，为了方便查找也要添加上一个id在我这里添加的是wrapper，为了更好看出效果的位置我这里还添加了一个<h1>标签，
接下来就是获取父元素的位置，按照以下格式追加：
-
- appendTo 向每个匹配的元素外部追加内容
$(A).appendTo(B)将新创建的A追加到B（已经存在的父节点）中
$('<p class="par"><a href="#">content</a><span>16121(appendTo)</span></p>').
appendTo($("#wrapper"));
1.2 append 向每个匹配的元素外部追加内容
$(B).append(A)将新创建的A追加到B（已经存在的父节点）中
$("#wrapper").append('<p class="par"><a href="#">content</a><span>16121
(append)</span></p>');
1.3 preond() 在父节点前追加子节点
$(B).prepend(A)将新创建的A追加到B（已经存在的父节点）中
$("#wrapper").prepend('<p class="par">使用prepend()方法追加的节点123</p>')
1.4 prependTo 在父节点前追加子节点
$(A).prependTo(B)将新创建的A追加到B（已经存在的父节点）中
$('<p class="par">使用prependTo ()方法追加的节点456</p>').prependTo
("#wrapper");
写完之后打开测试我们可以看到使用appendTo append 添加的内容会在原有内容下面，而且是按照写的先后顺序排列先后的
其次发现了使用preond prependTo 添加的内容出现在了原有内容的前面，更需要注意的是它的排序是按照后写的在上的倒序排列的，总之先写的就会更靠近原有的元素
- 节点追加
节点追加分为有四种方法分别是after、 before、 insertAfter、 insertBefore，但主要分为节点前和节点后两种
2.1 $("#box").after('<p>这是一个动态添加的p标签</p>');
在离父元素最近的 后面 （不是里面）添加
2.2 $("#box").before('<p>这是一个动态添加的p标签</p>');
在离父元素最近的 前面 （不是里面）添加
2.3 $('<p>这是一个动态添加的p标签</p>').insertAfter("#box");
在离父元素最近的 后面 （不是里面）添加
2.4 $('<p>这是一个动态添加的p标签</p>').insertBefore("#box");
在离父元素最近的 前面 （不是里面）添加
我们在测试中打开检查就可以很清楚地看到我们使用以上四种方法添加的内容都是在父节点的前面或者后面，而不是在里面
- 节点移除
在移除之前我们先设置好一个节点，例如：
<ul id="list">
<li>html</li>
<li>css</li>
<li>jacascript</li>
</ul>
3.1 jquery empty()清空子节点
$("#list").empty();
empty这种方法只会清空父节点内部的所有子节点
3.2 remove()移除整个节点
$("#list").remove();
而remove方法则会清空整个节点
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
