在本教程中，我们将学习通过使用jQuery在现有元素之外添加新元素来操纵DOM。

我们可以使用以下方法在现有元素之外添加新元素。

• before()
• insertBefore()
• after()
• insertAfter()

before()

我们使用" before()"方法在任何给定元素之前添加一个元素。

在以下示例中，我们在ID为" sample-div1"的div之前添加了一个段落。

HTML

<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

jQuery

$("#sample-div1").before("<p>Para 4</p>");

<p>Para 4</p>
<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

insertBefore()

这类似于" before()"方法，只是在我们编写代码以在给定元素之前添加新元素的方式不同。

我们正在考虑相同的上述示例，并在id为" sample-div1"的div之前添加一个新段落。

$("<p>Para 4</p>").insertBefore("#sample-div1");

after()

我们使用after()方法在任何给定元素之后添加一个元素。

在下面的示例中，我们在id为" sample-div1"的div之后添加一个段落。

HTML

<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

jQuery

$("#sample-div1").after("<p>Para 4</p>");

<div id="sample-div1">
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>
<p>Para 4</p>

insertAfter()

这类似于after()方法，不同之处仅在于我们编写代码以在给定元素之后添加新元素的方式。

我们正在考虑相同的上述示例，并在id为" sample-div1"的div之后添加一个新段落。

$("<p>Para 4</p>").insertAfter("#sample-div1");