$("#myDiv").before("<h1>Welcome</h1>");

这将在 myDiv 元素之前插入一个新的

元素，页面的结果如下所示：

Welcome
<div id="myDiv">
  <p>Hello World!</p>
</div>

登录后复制

我们也可以通过 before() 函数来将一个已经存在的元素移动到另一个位置。例如，假设我们有以下 HTML 代码：

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<div id="newDiv"></div>

我们可以使用 before() 函数和选择器来将第二个

元素移动到 #newDiv 元素之前，如下所示：

$("#newDiv").before($("div:first p:last"));

最终的 HTML 代码将会是这样的：

<div id="newDiv">
  <p>Paragraph 2</p>
</div>

<div>
  <p>Paragraph 1</p>
</div>

通过上述代码，我们成功地将第二个

元素移动到了 #newDiv 元素之前。

before() 函数的链式使用

jQuery 可以使用链式操作，这也意味着可以多次使用 before() 函数。例如，假设我们有以下 HTML 代码：

<div id="myDiv">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

我们可以使用以下代码将三个新的

元素插入到 #myDiv 元素之前，如下所示：

$("#myDiv")
  .before("<p>New Paragraph 1</p>")
  .before("<p>New Paragraph 2</p>")
  .before("<p>New Paragraph 3</p>");

最终的 HTML 代码将会是这样的：

New Paragraph 3
New Paragraph 2
New Paragraph 1
<div id="myDiv">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

before() 函数与 insertBefore() 函数的比较

在 jQuery 中，before() 函数的作用和 JavaScript 原生的 insertBefore() 函数非常相似。那么，二者有什么不同之处呢？

首先，insertBefore() 是 JavaScript 原生的函数，而 before() 是 jQuery 提供的函数。这意味着，insertBefore() 函数比 before() 函数更加灵活，可以在原生 JavaScript 代码中使用。另一方面，before() 函数比 insertBefore() 函数更加方便，可以用链式操作多次调用。

其次，它们的参数顺序不同。insertBefore() 函数的语法是：

parentElement.insertBefore(newElement, referenceElement);

其中，parentElement 是新元素要插入到其内部的父元素，newElement 是要插入的新元素，referenceElement 是新元素要插入到其前面的参考元素。

对比 before() 函数的语法：

$(referenceElement).before(newElement);

其中，referenceElement 是现有元素，newElement 是要插入的新元素。

最后，before() 函数返回的是包含新元素的 jQuery 对象，而 insertBefore() 函数返回的是新元素本身。

结论

通过本文的介绍，我们了解了 before() 函数在 jQuery 中的用法和功能。我们可以使用 before() 函数在任意位置插入新的内容，或者通过选择器将一个已经存在的元素移动到另一个位置。我们也展示了 before() 函数可以用于链式操作，以插入多个新元素。

与原生的 JavaScript 函数 insertBefore() 相比，before() 函数更加方便，灵活性稍差。

在使用时，我们应该根据实际需求选择具体的函数。无论是使用 before() 还是 insertBefore()，它们都是非常有用的工具，可以帮助我们更加轻松地管理和操作网页上的元素。