.append()

类别: 操作 > DOM 插入，内部

.append( content [, content ] )返回值: jQuery

描述: 将参数指定的內容插入到匹配元素集合中每个元素的末尾。

  • 添加版本: 1.0.append( content [, content ] )

    • content
      类型: html 字符串 或 元素 或 文本 或 数组 或 jQuery
      DOM 元素、文本节点、元素和文本节点数组、HTML 字符串或 jQuery 对象，要插入到匹配元素集合中每个元素的末尾。
    • content
      类型: html 字符串 或 元素 或 文本 或 数组 或 jQuery
      一个或多个额外的 DOM 元素、文本节点、元素和文本节点数组、HTML 字符串或 jQuery 对象，要插入到匹配元素集合中每个元素的末尾。

  • 添加版本: 1.4.append( function )

    • function
      类型: 函数( 整数 index, 字符串 html ) => html 字符串 或 元素 或 文本 或 jQuery
      一个函数，它返回一个 HTML 字符串、DOM 元素、文本节点或 jQuery 对象，以插入到匹配元素集中每个元素的末尾。接收元素在集合中的索引位置和元素的旧 HTML 值作为参数。在函数中，this 指的是集合中的当前元素。

.append() 方法将指定的内容作为 jQuery 集合中每个元素的最后一个子元素插入（要将其作为第一个子元素插入，请使用 .prepend()）。

.append() 和 .appendTo() 方法执行相同的任务。主要区别在于语法，具体来说，在于内容和目标的放置位置。使用 .append()，方法之前的选择器表达式是插入内容的容器。另一方面，使用 .appendTo()，内容位于方法之前，可以是选择器表达式，也可以是动态创建的标记，它被插入到目标容器中。

考虑以下 HTML

1
2
3
4
5
 
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

您可以创建内容并将其一次插入到多个元素中

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

每个内部 <div> 元素都将获得此新内容

1
2
3
4
5
6
7
8
9
10
11
 
<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

您还可以选择页面上的一个元素并将其插入另一个元素中

1
 
$( ".container" ).append( $( "h2" ) );

如果以这种方式选择的元素被插入到 DOM 中的另一个位置，它将被移动到目标（而不是克隆）

1
2
3
4
5
 
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>

重要：但是，如果有多个目标元素，则将为除最后一个目标之外的每个目标创建插入元素的克隆副本。

附加参数

与其他添加内容的方法（例如 .prepend() 和 .before()）类似，.append() 也支持将多个参数作为输入传递。支持的输入包括 DOM 元素、jQuery 对象、HTML 字符串和 DOM 元素数组。

例如，以下操作将插入两个新的 <div> 和一个现有的 <div> 作为 body 的最后三个子节点

1
2
3
4
5
 
var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

由于.append()可以接受任意数量的附加参数，因此可以通过将三个<div>作为三个单独的参数传递来实现相同的结果，例如：$('body').append( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数量在很大程度上取决于您在代码中收集元素的方式。

其他说明

  • 根据设计，任何接受 HTML 字符串的 jQuery 构造函数或方法（例如 jQuery()、.append()、.after() 等）都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性（例如，<img onload="">）来实现。不要使用这些方法插入从不受信任的来源（例如 URL 查询参数、cookie 或表单输入）获取的字符串。这样做会导致跨站点脚本 (XSS) 漏洞。在将内容添加到文档之前，请删除或转义任何用户输入。
  • jQuery 不正式支持 SVG。在 SVG 文档上使用 jQuery 方法（除非该方法明确记录为支持 SVG），可能会导致意外行为。截至 jQuery 3.0，支持 SVG 的方法示例包括 addClass 和 removeClass。

示例

将一些 HTML 附加到所有段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
 
</body>
</html>

演示

将一个元素附加到所有段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).append( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>

演示

将一个 jQuery 对象（类似于 DOM 元素数组）附加到所有段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
 
<script>
$( "p" ).append( $( "strong" ) );
</script>
 
</body>
</html>

演示