.prepend()

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