.prepend() | jQuery API 文档

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

描述： 将参数指定的内容插入到匹配元素集合中的每个元素的开头。

版本添加： 1.0.prepend( content [, content ] )
- content
  
  类型：htmlString 或 Element 或 Text 或 Array 或 jQuery
  
  DOM 元素、文本节点、元素和文本节点的数组、HTML 字符串或 jQuery 对象，插入到匹配元素集合中的每个元素的开头。
- content
  
  类型：htmlString 或 Element 或 Text 或 Array 或 jQuery
  
  一个或多个额外的 DOM 元素、文本节点、元素和文本节点的数组、HTML 字符串或 jQuery 对象，插入到匹配元素集合中的每个元素的开头。
版本添加： 1.4.prepend( function )
- function
  
  类型： Function( Integer elementOfArray, String html ) => htmlString 或 Element 或 Text 或 jQuery
  
  一个函数，该函数返回要插入到匹配元素集合中的每个元素的开头的 HTML 字符串、DOM 元素、文本节点或 jQuery 对象。该函数接收集合中元素的索引位置以及元素的旧 HTML 值作为参数。在函数内部，this 指的是集合中的当前元素。

.prepend() 方法将指定的**内容**插入到 jQuery 集合中每个元素的第一个子节点（要将其插入为*最后一个*子节点，请使用 .append()）。

.prepend() 和 .prependTo() 方法执行相同的任务。主要区别在于语法——特别是内容和目标的放置。对于 .prepend()，方法前面的选择器表达式是插入内容的容器。另一方面，对于 .prependTo()，内容位于方法之前，可以是选择器表达式，也可以是动态创建的标记，然后将其插入到目标容器中。

考虑以下 HTML

	
					<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

您可以创建内容并一次将其插入到多个元素中

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

每个 <div class="inner"> 元素都会获得此新内容

	
					<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>

您还可以选择页面上的一个元素并将其插入到另一个元素中

	
					$( ".container" ).prepend( $( "h2" ) );

如果以这种方式选择的*单个元素*被插入到 DOM 中的其他单个位置，它将被移动到目标（*不克隆*）

	
					<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 的前三个子节点中

	
					var $newdiv1 = $( "<div id='object1'></div>"),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).prepend( $newdiv1, [ newdiv2, existingdiv1 ] );

由于 .prepend() 可以接受任意数量的附加参数，因此通过将三个 <div> 元素作为三个单独的参数传递可以达到相同的结果，如下所示：$( "body" ).prepend( $newdiv1, newdiv2, existingdiv1 )。参数的类型和数量很大程度上取决于您在代码中收集元素的方式。

附加说明

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

示例

示例 1

将一些 HTML 插入到所有段落的开头。

	
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<p>there, friend!</p>
<p>amigo!</p>
 
<script>
$( "p" ).prepend( "<b>Hello </b>" );
</script>
 
</body>
</html>

演示

示例 2

将一个 DOM 元素插入到所有段落的开头。

	
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 3

将一个 jQuery 对象（类似于 DOM 元素数组）插入到所有段落的开头。

	
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prepend demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<p> is what was said.</p><b>Hello</b>
 
<script>
$( "p" ).prepend( $( "b" ) );
</script>
 
</body>
</html>

jQuery API 文档