jQuery insertBefore()实例

定义

insertBefore() 方法在被选元素之前插入 HTML 内容或已有元素。

语法

$(content).insertBefore(selector)

描述

插入内容 可能是 HTML 字符串，HTML DOM 元素或 jQuery 对象。

selector 参数表示选择器，被选元素是将要把内容插入到它前面的元素。

实例1

以下示例将一个新的

元素插入到所有 class 为 "test" 的元素之前：

HTML

<div class="test">111</div>
<div class="test">222</div>
<div class="test">333</div>

jQuery 代码

$("<p>Insert new content before each .test element.</p>").insertBefore(".test");

实例2

以下示例将 ID 为 "p3" 的元素插入到 ID 为 "p2" 的元素之前：

HTML

<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p id="p3">This is a third paragraph.</p>

jQuery 代码

$("#p3").insertBefore("#p2");

总结

insertBefore() 方法是 jQuery 提供的一个方便实用的 DOM 操作方法，可以便捷地实现在特定元素之前插入另一个元素或 HTML 内容的功能。在实际开发过程中，我们可以利用该方法快速地定位目标元素并插入所需内容，提高 web 页面的互动性和用户体验。