before()

根据参数设定，在匹配元素外的前面插入内容

.before ( content [, content ])

content 类型: String, Element, jQuery 。 HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插在集合中每个匹配元素前面。
content 类型: String, Element, Array, jQuery 。一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象，用来插在集合中每个匹配元素前面。

.before ( function )

function 类型:Function() 。一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插在集合中每个匹配元素前面。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中 this 指向元素集合中的当前元素。

.before (function-html))

function-html 类型: Function(Integer index, String html)=> htmlString or Element or Text or jQuery

该函数返回一个HTML字符串，DOM元素，文本节点或jQuery对象，以插入匹配元素集中的每个元素之前。接收元素在集合中的索引位置以及该元素的旧HTML值作为参数。在函数内，this引用集合中的当前元素。

.before() 和.insertBefore()实现同样的功能。主要的不同是语法——内容和目标的位置不同。对于 .before() ,选择器表达式在方法的前面，参数是将要插入的内容。对于 .insertBefore() 刚好相反，内容在方法前面，无论是作为一个选择表达式或作为标记上创建动态，它将被放在目标容器的前面。

请看下面的HTML:

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

你可以创建内容然后同时插入到多个元素前面：

$('.inner').before('<p>Test</p>');

每个新的inner <div> 元素会得到新的内容：

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

你也可以在页面上选择一个元素然后插在另一个元素前面：

$('.container').before($('h2'));

如果一个被选中的元素被插入到另外一个地方，这是移动而不是复制：

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

如果有多个目标元素，内容将被复制然后按顺序插入到每个目标里面。

在jQuery 1.4中, .before() 和 .after() 同样对脱离文档的DOM节点（注：脱离文档的DOM节点，即，可能时javascript动态创建的，还没被插入到html文档中）有效：

$("<div/>").before("<p></p>");

结果是一个jQuery集合包含一个段落和一个 div（按此顺序）。

Additional Arguments（额外的参数）

类似的其他内容的添加方法如 .prepend() 和 .after() , .before() 还支持传递输入多个参数。支持的输入包括DOM元素，jQuery对象，HTML字符串，DOM元素的数组。

例如，下面将插入两个新的<div<和现有的<div<到第一个段落：

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

.before() 可以接受任何数量的额外的参数，所以上面的例子中，也可以将三个独立的<div>分别作为参数传给该方法，就像这样 $('p').first().before($newdiv1, newdiv2, existingdiv1) 。参数的类型和数量将在很大程度上取决于在代码中被收集的元素。

补充笔记：

在jQuery 1.9之前， .before() 如果集合中的第一个节点未连接到文档，则会尝试在当前jQuery集合中添加或更改节点，在这种情况下，将返回新的jQuery集合而不是原始集合。该方法可能返回也可能未返回新结果，具体取决于其参数的数量或连接性！在jQuery 1.9，， .after() ， .before() 并且 .replaceWith() 总是返回原始未修改集。尝试在没有父节点的节点上使用这些方法没有任何效果，也就是说，集及其所包含的节点都不会更改。
通过设计，它接受的HTML字符串的jQuery任何构造或方法- jQuery的（），.append（），。经过（）等-可以潜在地执行代码。这可以通过注入脚本标签或使用执行代码的HTML属性（例如， <img onload=""> ）来发生。请勿使用这些方法插入从不受信任的来源（例如URL查询参数，cookie或表单输入）获得的字符串。这样做可能会引入跨站点脚本（XSS）漏洞。在向文档添加内容之前，请删除或转义任何用户输入。

例子

在所有段落前插入一些HTML。

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="./static/js/jquery-3.5.0.js"></script>
</head>
<body>
  <p> is what I said...</p>
<script>$("p").before("<b>Hello</b>");</script>
 
</body>
</html>

在所有段落前插入一个DOM元素。

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="./static/js/jquery-3.5.0.js"></script>
</head>
<body>
  <p> is what I said...</p>
<script>$("p").before( document.createTextNode("Hello") );</script>
 
</body>
</html>

在所有段落前插入一个jQuery对象（类似于一个DOM元素数组）。

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="./static/js/jquery-3.5.0.js"></script>
</head>
<body>
  <p> is what I said...</p><b>Hello</b>
<script>$("p").before( $("b") );</script>
 
</body>
</html>

返回jQuery导航

before()

Additional Arguments（额外的参数）

补充笔记：

例子