.appendTo()

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

.appendTo( target )返回类型：jQuery

描述：把匹配的元素集合中的每个元素插入到目标的末尾。

.append()和.appendTo()方法实施相同的任务。主要区别是内容和目标的位置，是语法特有的。利用.append()，选择器表达式在方法面，是内容要插入的容器。

例如，考虑带有简单图像元素的网页：

请考虑以下HTML：

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

我们可以创建内容并把它们一次性插入到若干个元素内部。

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

每个<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
 
$( "h2" ).appendTo( $( ".container" ) );

如果用这种方法选中的元素插入到DOM以外的傅立叶，它将被移动到目标（而不是克隆），并返回构成被插入元素的新集合：

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

然而，如果有不止一个目标元素，会针对除了最后一个目标元素之外的目标元素创建被插入的元素的克隆副本，并返回新集合（原始图像加克隆副本）。

在jQuery 1.9以前，追加到单个元素的情形不会创建一个新集合，而是返回原先的集合，导致它在用于数量未知的元素时，难以可靠地使用.end()方法。

补充说明：

  • 根据设计，任何接受HTML字符串的jQuery构造函数或方法——jQuery()、.append()、.after()等等——都可以潜在地执行代码。通过脚本标签注入或者使用执行代码的HTML特性（例如，<img onload="">）也能发生这种情况。不要使用这些方法来插入来自不可信任的来源的字符串，譬如URL查询参数、cookies，或表单输入。如果那样做的话会导致跨域脚本（XSS）漏洞。在把内容添加到文档之前，请先删除或转义任何用户输入。
  • jQuery并没有正式支持SVG。在SVG文档中使用jQuery方法，除非有针对此那些方法的明确说明，否则可能导致不期待的行为。自从jQuery 3.0以来，支持SVG的方法的例子是addClass和removeClass。

示例：

把所有的span后插入到ID为“foo”的元素上（请检查append()的文档以取得更多的示例。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>appendTo demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span>I have nothing more to say... </span>
 
<div id="foo">FOO! </div>
 
<script>
$( "span" ).appendTo( "#foo" );
</script>
 
</body>
</html>

演示：