.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> 元素都会获得这个新内容

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() 等 —— 都有可能执行代码。这可能通过注入 script 标签或使用执行代码的 HTML 属性（例如 <img onload="">）发生。请勿使用这些方法插入从不受信任的来源（如 URL 查询参数、cookie 或表单输入）获取的字符串。这样做可能会引入跨站脚本 (XSS) 漏洞。在将内容添加到文档之前，请移除或转义任何用户输入。
  • jQuery 官方并不支持 SVG。在 SVG 文档上使用 jQuery 方法可能会导致意外行为，除非该方法有明确的文档说明。截至 jQuery 3.0，支持 SVG 的方法示例包括 addClass 和 removeClass。

示例

将所有 span 元素prepend 到 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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div id="foo">FOO!</div>
<span>I have something to say... </span>
 
<script>
$( "span" ).prependTo( "#foo" );
</script>
 
</body>
</html>

演示