jQuery 添加元素

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

jQuery append() 方法

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

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

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

这里的 content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象，插入到匹配元素集合的每个元素的末尾。

概述

考虑以下HTML内容：

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

现在如果我们按照以下方式应用 append() 方法：

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

它将会产生如下结果：

<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>

示例

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

<!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() 方法

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

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

$(content).appendTo(selector);

这里的 content 参数可以是一个HTML字符串，一个DOM元素，文本节点，元素和文本节点的数组，或者jQuery对象，来插入到匹配元素集合中的每个元素的末尾。

示例

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

<!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()方法

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

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

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

在这里内容参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象，以将其插入到匹配的元素集的末尾。

概要

考虑以下HTML内容：

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

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

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

会产生以下结果：

<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>

示例

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

<!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() 方法

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

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

$(content).insertAfter(selector);

在这里， content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组或者用于插入到匹配元素集的每个元素末尾的jQuery对象。

示例

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

<!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() 方法

jQuery prepend() 方法在每个匹配元素的开头添加内容。您还可以在单个函数调用中添加多个元素。

下面是 prepend() 方法的语法:

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

在这里， content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组或者jQuery对象，要插入到匹配元素集合中每个元素的末尾。

概述

考虑以下HTML内容：

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

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

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

它将产生以下结果：

<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>

示例

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

<!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()方法

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

**prependTo() **方法的语法如下：

$(content).prependTo(selector);

在这里， content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组，或者jQuery对象，用于插入到匹配元素集合的每个元素末尾。

示例

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

<!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()方法

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

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

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

这里的 content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组，或者是要插入到匹配元素集合末尾的jQuery对象。

Synopsis

考虑以下HTML内容：

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

现在，如果我们按照如下方式应用before()方法： before() 。

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

它将产生以下结果：

<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>

示例

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

<!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()方法

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

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

$(content).insertBefore(selector);

content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象，用于在匹配元素集合的每个元素的末尾插入内容。

示例

让我们尝试下面的示例，然后验证结果：

<!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>