.append()

类别：文档处理 > DOM内部插入

.append( content [, content ] )返回类型：jQuery

描述：在匹配元素的集合中每个元素的末尾插入用参数指定的内容。

  • 增补版本：1.0.append( content [, content ] )

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

  • 增补版本：1.4.append( function )

    • function
      类型：Function( Integer index, String html ) => htmlString or Element or Text or 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.inner>元素取得了最新内容：

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>

重点：然而，如果有不止一个目标元素，会针对除了最后一个目标以外的每个目标创建被插入元素的克隆副本。

额外的参数

类似于其它内容添加方法，譬如.append()也支持传入多个参数作为输入。.prepend()和.before()，受支持的输入参数包括DOM元素、jQuery对象、HTML字符串以及DOM元素的数组。

例如，下面将把两个新的<div>和一个已有的<div>插入为document.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查询参数、cookies，或表单输入。如果那样做的话会导致跨域脚本（XSS）漏洞。在把内容添加到文档之前，请先删除或转义任何用户输入。
  • jQuery并没有正式支持SVG。在SVG文档中使用jQuery方法，除非有针对此那些方法的明确说明，否则可能导致不期待的行为。自从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.jquery.com/jquery-1.10.2.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.jquery.com/jquery-1.10.2.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.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
 
<script>
$( "p" ).append( $( "strong" ) );
</script>
 
</body>
</html>

演示：