jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

当我们需要使用jQuery向页面动态插入或移动节点时，可以使用insertAfter和insertBefore方法。下面我将详细讲解这两种用法。

insertAfter方法

insertAfter方法用于在指定元素"后面"添加节点，语法如下：

$(selector).insertAfter(content)

其中，selector表示需要插入节点的目标元素，content表示需插入的内容，可以是HTML标签、文本、变量等。

以下是使用insertAfter方法插入节点的示例：

<!-- HTML -->
<div class="container">
  <p class="target">目标元素</p>
</div>

// JavaScript
$( "<p>新增的段落</p>" ).insertAfter( ".target" ); //在目标元素后面添加一个段落

在示例中，先选中需要插入节点的目标元素".target"，然后使用insertAfter方法，插入一个新的段落元素"

新增的段落

"。

另一个示例是将一个元素移动到目标元素之后，可以使用插入自身的方法来实现（因为此时已经是“移动”操作）。代码如下：

<!-- HTML -->
<div class="container">
  <ul>
    <li class="target">目标元素</li>
    <li>列表项1</li>
  </ul>
</div>

// JavaScript
$( ".target" ).insertAfter( $( ".container ul li:last-child" ) ); //将目标元素移动到列表项1之后

在示例中，先选中需要移动的元素".target"，然后使用insertAfter方法，插入到目标位置：".container ul li:last-child"的后面。

insertBefore方法和insertAfter方法类似，不同的是它是在指定元素"之前"添加节点。语法如下：

$(selector).insertBefore(content)

其中，selector表示需要插入节点的目标元素，content表示需插入的内容，可以是HTML标签、文本、变量等。

以下是使用insertBefore方法插入节点的示例：

<!-- HTML -->
<div class="container">
  <p class="target">目标元素</p>
</div>

// JavaScript
$( "<p>新增的段落</p>" ).insertBefore( ".target" ); //在目标元素前面添加一个段落

在示例中，先选中需要插入节点的目标元素".target"，然后使用insertBefore方法，插入一个新的段落元素"

新增的段落

"。

另一个示例是将一个元素移动到目标元素之前，同样也可以使用插入自身的方法来实现。代码如下：

<!-- HTML -->
<div class="container">
  <ul>
    <li>列表项1</li>
    <li class="target">目标元素</li>
  </ul>
</div>

// JavaScript
$( ".target" ).insertBefore( $( ".container ul li:first-child" ) ); //将目标元素移动到列表项1之前

在示例中，先选中需要移动的元素".target"，然后使用insertBefore方法，插入到目标位置：".container ul li:first-child"的前面。

以上就是insertAfter和insertBefore方法的用法示例和详细说明。