.insertBefore()

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

.insertBefore( target )返回类型：jQuery

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

.before()方法和.insertBefore()方法实施了相同的任务。主要区别是内容和目标的位置，是语法特有的。利用.before()，在方法前面的选择器表达式是容器，用来插入内容。另一方面，用.insertBefore()，内容在方法前面，既可以是一个选择器表达式，也可以是一个快速创建的标签，它被插入到目标容器前面。

请考虑以下HTML：

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

我们可以创建内容并一次性把它插入到若干元素前面：

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

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

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

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

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

如果用这种方法选中的元素被插入到DOM中别的位置，则它将被移到目标后面（而不是克隆），并返回构成被插入的元素的新集合：

1
2
3
4
5
 
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</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。

示例：

在一个带有id="foo"的元素前面插入所有的段落。与$("#foo").before("p")相同。

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

演示：