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

我们可以使用6种方法在现有元素中添加新元素。

• text()

• html()

• append()

• appendTo()

• prepend()

• prependTo()

text()

我们使用 text()方法添加文本并从元素中获取文本。

如果我们想添加文本，那么我们只需要将文本值传递给方法。

在下面的示例中，我们将向id为"sample-p1"的段落添加文本"Hello World"。 $("#sample-p1").text("Hello World");我们也可以使用 text()方法获取任何元素的文本值。

在下面的示例中，我们将在浏览器控制台中获得id为"sample-p1"的段落的文本内容。 console.log( $("#sample-p1").text() );text()方法将转义传递给它的文本。
因此，如果我们传递任何HTML标记，那么它将被转义并作为文本而不是HTML元素打印。

在下面的示例中，我们将段落传递给id为"sample-div1"的div。 $("#sample-div1").text("<p style='color: red;'>Hello World</p>");这将为我们提供以下输出。

<p style='color:red；'>你好，世界</p>

我们可以看到，我们得到的是文本，而不是带有内容的实际段落标记。
为了解决这个问题，我们使用 html()方法。

html()

我们使用 html()方法来添加html标记及其内容。

在下面的示例中，我们将向具有id"sample-div1"的div添加一个段落。 $("#sample-div1").html("<p style='color: red;'>Hello World</p>");

append()

我们使用 append()方法在现有元素内部和末尾添加新元素。

在下面的示例中，我们有一个id为"sample-div1"的div，它有3个段落，我们将使用 append()方法。

HTML格式

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

jQuery查询 $("#sample-div1").append("<p>Para 4</p>");输出

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

appendTo()

这与 append()方法和只在编写代码以在现有元素内部和结尾添加新元素的方式上有所不同。

我们正在考虑上面的示例，并在一个具有id"sample-div1"的div的末尾添加一个新段落。 $("<p>Para 4</p>").appendTo("#sample-div1");

prepend()

我们使用 prepend()方法在现有元素内部和开头添加新元素。

在下面的示例中，我们有一个id为"sample-div1"的div，它有3个段落，我们在开头使用 prepend()方法。

HTML格式

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

jQuery查询 $("#sample-div1").prepend("<p>Para 4</p>");输出

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

prependTo()

这与 prepend()方法和只在编写代码以在现有元素内部和开头添加新元素的方式上有所不同。

我们正在考虑上面的示例，并在一个具有id"sample-div1"的div的开头添加一个新段落。 $("<p>Para 4</p>").prependTo("#sample-div1");