.prependTo()

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

.prependTo( target )返回类型：jQuery

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

.prepend()方法和.prependTo()方法实施了相同的任务。主要区别是内容和目标的位置，是语法特有的。利用.prepend()，此方法前面的选择器表达式是要插入内容的容器。另一方面，利用.prependTo()，方法前面的内容，要么是一个选择器表达式，要么是快速创建的标记，然后它被插入到目标容器中。

请考虑以下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>" ).prependTo( ".inner" );

每个<div.inner>元素取得了最新内容：

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

我们还可以选择网页上的一个元素，把它插入到另一个元素中：

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

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

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

然而，如果有不止一个目标元素，会针对除最后一个目标元素之外每个目标元素创建要插入的元素的副本。

补充说明：

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

示例：

把所有的<span>后插入到带有id="foo"的元素（请参阅.prepend()的文档以获得更多示例。

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>prependTo demo</title>
  <style>
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

演示：