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

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

wrap()

我们使用wrap()方法将现有元素包装成新元素。

在下面的示例中，我们将使用div包装ID为" sample-p1"的段落。

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrap("<div></div>");

<div>
  <p id="sample-p1">Para 1</p>
</div>

我们还可以向包装元素添加属性。

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrap( $("<div ", {
  "id" : "sample-div1",
  "class" : "container"
}));

<div id="sample-div1" class="container">
  <p id="sample-p1">Para 1</p>
</div>

wrapAll()

如果我们想包装多个元素，则使用wrapAll()方法。

在下面的示例中，我们将使用div包装所有具有" sample-p"类的段落。

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapAll("<div></div>");

<div>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</div>

我们还可以向包装元素添加属性。

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapAll( $("<div ", {
  "id" : "sample-div1",
  "class" : "container"
}));

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

wrapInner()

我们使用wrapInner()方法包装任何元素的内部内容。

在下面的示例中，我们将包装ID为" sample-p1"的段落的内部内容。

HTML

<p id="sample-p1">Para 1</p>

jQuery

$("#sample-p1").wrapInner("<span></span>");

<p id="sample-p1">
  <span>Para 1</span>
</p>

我们还可以向内部包装器元素添加属性。

HTML

<p class="sample-p">Para 1</p>
<p class="sample-p">Para 2</p>
<p class="sample-p">Para 3</p>

jQuery

$(".sample-p").wrapInner( $("<span ", {
  "class" : "sample-span"
}));

<p class="sample-p">
  <span class="sample-span">Para 1</span>
</p>
<p class="sample-p">
  <span class="sample-span">Para 2</span>
</p>
<p class="sample-p">
  <span class="sample-span">Para 3</span>
</p>

empty()

我们使用" empty()"方法删除元素的内容。

在以下示例中，我们将删除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").empty();

<div id="sample-div1">
</div>

remove()

我们使用remove()方法从页面中删除元素。

在以下示例中，我们将删除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").remove();

这将删除div及其内容。