JQuery .insertBefore()用法及代码示例

.before() 和 .insertBefore() 方法执行相同的任务。主要区别在于syntax-specifically，内容和目标的放置。对于 .before() ，方法前面的选择器表达式是插入内容的容器。另一方面，对于 .insertBefore() ，内容在方法之前，作为选择器表达式或动态创建的标记，它被插入到目标容器之前。

考虑以下 HTML：

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

我们可以创建内容并将其一次插入多个元素之前：

$( "<p>Test</p>" ).insertBefore( ".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>

我们还可以选择页面上的一个元素并将其插入另一个元素之前：

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

如果以这种方式选择的元素被插入到 DOM 中其他位置的单个位置，它将被移动到目标之前(未克隆)并返回由插入元素组成的新集合：

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

但是，如果有多个目标元素，则会在第一个目标之后为每个目标创建插入元素的克隆副本，并返回新集合(原始元素加上克隆)。

在 jQuery 1.9 之前，append-to-single-element case 没有创建新的集合，而是返回了原来的集合，这使得很难使用.end()当与未知数量的元素一起使用时，该方法可靠。

• 根据设计，任何接受 HTML 字符串的 jQuery 构造函数或方法(jQuery()、.append()、.after() 等)都可能执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性(例如，<img onload="">)来实现。不要使用这些方法插入从 URL 查询参数、cookie 或表单输入等不受信任的来源获得的字符串。这样做会引入cross-site-scripting (XSS) 漏洞。在向文档添加内容之前删除或转义任何用户输入。
• jQuery 不正式支持 SVG。在 SVG 文档上使用 jQuery 方法，除非为该方法明确记录，否则可能会导致意外行为。从 jQuery 3.0 开始支持 SVG 的方法示例是 addClass 和 removeClass 。