.prepend()

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

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

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

.prepend()方法把指定的内容插入为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
 
$( ".inner" ).prepend( "<p>Test</p>" );

每个<div class="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
 
$( ".container" ).prepend( $( "h2" ) );

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

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

重点：然而，如果有不止一个目标元素，将针对除了最后一个目标元素之外其它每个目标元素克隆出要复制元素的副本。

额外的参数

类似于其它内容添加方法，譬如.append()和.before()，.prepend()也支持传入多个参数作为输入。受支持的输入参数包括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" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );

因为.prepend()可以接受任意数目的额外参数，传入三个<div>作为三个分开的参数，也可以实现同样的结果。参数的类型和数目很大程度上取决于你如何在你的代码中收集元素。

补充说明：

  • 根据设计，任何接受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
23
 
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>prepend demo</title>
 <style>
 p {
 background: yellow;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>

演示：

把一个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>prepend demo</title>
 <style>
 p {
 background: yellow;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>is what I'd say</p>
<p>is what I said</p>
 
<script>
$( "p" ).prepend( 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
 
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>prepend demo</title>
 <style>
 p {
 background: yellow;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p> is what was said.</p><b>Hello</b>
 
<script>
$( "p" ).prepend( $( "b" ) );
</script>
 
</body>
</html>

演示：