Jquery 简明教程

jQuery - Add Elements

jQuery 提供了各种方法以便在现有 HTML 文档中添加新的 DOM 元素。您可以根据您的需求，在各种位置（任何现有标记前后）添加这些新元素。

jQuery provides various methods to add new DOM elements in the existing HTML document. You can add these new elements at various locations (before, after any of the existing tags) based on your requirements.

jQuery append() Method

jQuery append() 方法在每个匹配元素末尾添加内容。您还可以在一个函数调用中追加多个元素。

The jQuery append() method adds the content at the end of the matched each element(s). You can also append multiple elements in a single function call.

以下是 append() 方法的语法：

Following is the syntax of the append() method:

$(selector).append(content, [content]);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

现在，如果我们如下应用 append() 方法：

Now if we apply the append() method as follows:

$( ".inner" ).append( "<p>Zara</p>" );

将会产生以下结果：

It will produce following result:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello
   <p>Zara</p>
   </div>
   <div class="inner">Goodbye
   <p>Zara</p>
   </div>
</div>

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").append("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery append() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery appendTo() Method

jQuery appendTo() 方法执行与 appendTo() 相同的任务。主要区别在于语法，具体来说是内容和目标的位置。

The jQuery appendTo() method performs the same task as done by appendTo(). The major difference is in the syntax-specifically, in the placement of the content and target.

以下是 appendTo() 方法的语法：

Following is the syntax of the appendTo() method:

$(content).appendTo(selector);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery appendTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery after() Method

jQuery after() 方法会向匹配的每个元素之后添加内容。你也可以在单个函数调用中插入多个元素。

The jQuery after() method adds the content after the matched each element(s). You can also insert multiple elements in a single function call.

以下是 after() 方法的语法：

Following is the syntax of the after() method:

$(selector).after(content, [content]);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

如果现在我们使用以下方式应用 after() 方法：

Now if we apply the after() method as follows:

$( ".inner" ).after( "<p>Zara</p>" );

将会产生以下结果：

It will produce following result:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
   <p>Zara</p>
</div>

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").after("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery after() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery insertAfter() Method

jQuery insertAfter() 方法会向匹配的每个元素之后添加内容。 after() 和 insertAfter() 方法执行相同的任务。主要区别在于语法——具体来说，是内容和目标的位置。

The jQuery insertAfter() method adds the content after the matched each element(s). The after() and insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

以下是 after() 方法的语法：

Following is the syntax of the after() method:

$(content).insertAfter(selector);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertAfter() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery prepend() Method

jQuery prepend() 方法会向匹配的每个元素的开始位置添加内容。你也可以在单个函数调用中在前面添加多个元素。

The jQuery prepend() method adds the content at the beginning of the matched each element(s). You can also prepend multiple elements in a single function call.

以下是 append() 方法的语法：

Following is the syntax of the append() method:

$(selector).prepend(content, [content]);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

如果现在我们使用以下方式应用 prepend() 方法：

Now if we apply the prepend() method as follows:

$( ".inner" ).prepend( "<p>Zara</p>" );

将会产生以下结果：

It will produce following result:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Zara</p>
   Hello
   </div>
   <div class="inner">
   <p>Zara</p>
   Goodbye
   </div>
</div>

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery prependTo() Method

jQuery prependTo() 方法执行与 prepend() 相同的任务。主要区别在于语法——具体来说，是内容和目标的位置。

The jQuery prependTo() method perform the same task as done by prepend(). The major difference is in the syntax-specifically, in the placement of the content and target.

以下是 prependTo() 方法的语法：

Following is the syntax of the prependTo() method:

$(content).prependTo(selector);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prependTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery before() Method

jQuery before() 方法会向匹配的每个元素之前添加内容。你也可以在单个函数调用中插入多个元素。

The jQuery before() method adds the content before the matched each element(s). You can also insert multiple elements in a single function call.

以下是 before() 方法的语法：

Following is the syntax of the before() method:

$(selector).before(content, [content]);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

<div class="container">
   <h2>jQuery before() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

如果这时我们使用 before() 方法：

Now if we apply the before() method as follows:

$( ".inner" ).before( "<p>Zara</p>" );

将会产生以下结果：

It will produce following result:

<div class="container">
   <h2>jQuery before() Method</h2>
   <p>Zara</p>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
</div>

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").before("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery before() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery insertBefore() Method

jQuery insertBefore() 方法会向匹配的每个元素之前添加内容。 before() 和 insertBefore() 方法执行相同任务。主要区别在于语法——具体来说，是内容和目标的位置。

The jQuery insertBefore() method adds the content before the matched each element(s). The before() and insertBefore() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

以下是 after() 方法的语法：

Following is the syntax of the after() method:

$(content).insertBefore(selector);

此处， content 参数可以是 HTML 字符串、DOM 元素、文本节点、元素和文本节点数组或者 jQuery 对象，以便将其插入到匹配元素集中每个元素的末尾。

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

让我们尝试以下示例并验证结果：

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertBefore() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>

   <button>Add Text</button>
</body>
</html>

jQuery HTML/CSS Reference

您可以在以下页面获取用来操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考： jQuery HTML/CSS Reference 。

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.