jQuery插入节点的多种方法（附带实例）

在创建节点时，我们使用了 append() 方法将定义的节点内容插入指定的元素。实际上，该方法是用于插入节点的方法。除了 append() 方法外，jQuery 还提供了其他插入节点的方法。

在 jQuery 中，插入节点可以分为在元素内部插入和在元素外部插入两种，下面我们分别对其进行介绍。

jQuery在元素内部插入

在元素内部插入就是向一个元素中添加子元素和内容。jQuery 提供了下表所示的在元素内部插入的方法。

表：在元素内部插入的方法
方法	说明	示例
append(content)	为所有匹配的元素的内部追加内容	<p id="B">C语言基础教程</p> $("#B").append("<p>A</p>"); //为 id 属性值为 B 的元素内部追加一个段落结果：<p id="B">C语言基础教程<p>A</p></p>
appendTo(content)	将所有匹配的元素追加到另一个元素的元素集中	<p id="A">C语言中文网</p> <p id="B">C语言基础教程</p> $("#B").appendTo("#A"); //将 id 属性值为 B 的元素追加到 id 属性值为 A 的元素后面，也就是将 id 属性值为 B 的元素移动到 id 属性值为 A 的元素后面结果：<p id="A">C语言中文网<p id="B">C语言基础教程</p></p>
prepend(content)	为所有匹配的元素的内部前置内容	<p id="B">C语言基础教程</p> $("#B").prepend("<p>A</p>"); //为 id 属性值为 B 的元素内部前置一个段落结果：<p id="B"><p>A</p>C语言基础教程</p>
prependTo(content)	将所有匹配的元素前置到另一个元素的元素集中	<p id="A">C语言中文网</p> <p id="B">C语言基础教程</p> $("#B").prependTo("#A"); //将 id 属性值为 B 的元素添加到 id 属性值为 A 的元素前面，也就是将 id 属性值为 B 的元素移动到 id 属性值为 A 的元素前面结果：<p id="A"><p id="B">C语言基础教程</p>C语言中文网</p>

从上表可以看出，append() 方法与 prepend() 方法类似，不同的是 prepend() 方法将添加的内容插入原有内容的前面。

appendTo() 实际上是颠倒了 append() 方法，如下面这行代码：

$("<p>A</p>").appendTo("#B"); //将指定内容添加到 id 属性值为 B 的元素中

等同于：

$("#B").append("<p>A</p>"); //将指定内容添加到 id 属性值为 B 的元素中

不过，append() 方法并不能移动页面中的元素，而 appendTo() 方法是可以的，如下面这行代码：

$("#B").appendTo("#A"); //移动 id 属性值 B 的元素到 id 属性值为 A 的元素后面

append() 方法是无法实现该功能的，读者需注意两者的区别。

prepend() 方法是在所有匹配元素内部的开始处插入内容的最佳方法。prepend() 方法与 prependTo() 的区别同 append() 方法与 appendTo() 方法的区别。

【实例】向<div>元素内部插入节点。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个空的 <div> 元素，代码如下：

<div></div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，创建两个 <p> 节点，分别使用 append() 和 appendTo() 方法将这两个 <p> 节点插入 <div> 元素中。具体代码如下：

$(document).ready(function(){
    var $p_1 = $("<p>C语言中文网</p>"); // 创建第 1 个<p>元素
    var $p_2 = $("<p>C语言基础教程</p>"); // 创建第 2 个<p>元素，文本内容为空
    $div = $("div"); // 获取<div>元素对象
    $div.append($p_1); // 将第 1 个<p>元素插入<div>元素中
    $p_2.appendTo($div); // 将第 2 个<p>元素插入<div>元素中
});

运行本实例，将显示下图所示的效果：

图 1 向元素内部插入节点

jQuery在元素外部插入

在元素外部插入就是将要添加的内容插入元素之前或元素之后。jQuery 提供了下表所示的在元素外部插入的方法。

表：在元素外部插入的方法
方法	说明	示例
after(content)	在每个匹配的元素之后插入内容	<p id="B">C语言基础教程</p> $("#B").after("<p>A</p>"); //在 id 属性值为 B 的元素之后插入一个段落结果：<p id="B">C语言基础教程</p><p>A</p>
insertAfter(content)	将所有匹配的元素插入到另一个指定元素的元素集后面	<p id="B">C语言基础教程</p> <p>test</p> $("<p>test</p>").insertAfter("#B"); //将要添加的段落插入 id 属性值为 B 的元素后面结果：<p id="B">C语言基础教程</p><p>test</p>
before(content)	在每个匹配的元素之前插入内容	<p id="B">C语言基础教程</p> $("#B").before("<p>A</p>"); //在 id 属性值为 B 的元素之前插入一个段落结果：<p>A</p><p id="B">C语言基础教程</p>
insertBefore(content)	将所有匹配的元素插入到另一个指定元素的元素集前面	<p id="A">C语言中文网</p> <p id="B">C语言基础教程</p> $("#B").insertBefore("#A"); //将 id 属性值为 B 的元素插入到 id 属性值为 A 的元素前面，也就是将 id 属性值为 B 的元素移动到 id 属性值为 A 的元素前面结果：<p id="B">C语言基础教程</p><p id="A">C语言中文网</p>

jQuery插入节点的多种方法（附带实例）

jQuery在元素内部插入

jQuery在元素外部插入

相关文章