• jQuery Video Tutorials

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://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() 方法执行与 append() 相同的任务。主要区别在于语法，特别是在内容和目标的位置。

以下是 appendTo() 方法的语法

$(content).appendTo(selector);

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

示例

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://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]);

这里 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://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://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() 方法将内容添加到匹配的每个元素的开头。您也可以在单个函数调用中预先添加多个元素。

以下是 append() 方法的语法

$(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://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://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 对象，用于插入到匹配元素集中每个元素的末尾。

摘要

考虑以下 HTML 内容

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

现在，如果我们应用 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://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://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 参考

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

打印页面
上一页
下一页
广告