操作DOM是jQuery最核心的能力之一，而在指定位置插入新内容则是DOM操作里使用频率很高的场景。before()方法专门用于在匹配元素之前插入内容，它看似简单，实际使用中却藏着不少容易出错的细节，比如插入的节点到底是兄弟还是子级、参数能不能是函数、链式调用返回的到底是什么。这篇文章把before方法的语法、用法和常见误区一次讲清楚。
before方法的基本语法与参数
before()的语法非常直接，调用形式为$(selector).before(content)，表示在所有匹配的元素之前插入指定的内容。参数可以是HTML字符串、DOM元素、文本节点、jQuery对象，甚至是一个返回内容的函数。看一个最基础的例子：
<div class="container">
<p id="target">我是目标段落</p>
</div>
<script>
// 在 #target 前面插入一个新标题
$("#target").before("<h3>新插入的标题</h3>");
// 插入纯文本
$("#target").before("这里是一段纯文本");
</script>执行后，h3标题和那段文本会出现在p元素的前面，三者是同级关系，都挂在container下面。这一点要特别强调：before插入的内容是目标元素的兄弟节点，不是子节点。如果想让内容成为目标元素的第一个子节点，应该用prepend()，两者经常被新手搞混。
参数还可以传函数，这是很多人没注意到的能力。函数的返回值会被作为插入内容，函数内部可以拿到索引和旧内容做逻辑判断：
<ul>
<li class="item">第一项</li>
<li class="item">第二项</li>
<li class="item">第三项</li>
</ul>
<script>
// 给每个 li 前面插入序号，index 从 0 开始
$(".item").before(function(index) {
return "<span>序号 " + (index + 1) + "</span>";
});
</script>这样三个li前面各自插入了对应的序号span，非常适合需要按位置生成内容的场景。另外，参数也可以是已有的jQuery对象，注意如果传入的是页面中已存在的元素，before会执行移动操作而不是复制，原位置的元素会被“搬走”，这一点在后面误区部分还会展开。
before与prepend、insertBefore的区别对比
jQuery提供了好几个插入方法，名字相似但行为完全不同，必须分清楚。先说before和prepend的区别：before插入的内容在目标元素外部前面，是兄弟关系；prepend插入的内容在目标元素内部开头，是父子关系。用一张表对比更直观：
| 方法 | 插入位置 | 节点关系 |
|---|---|---|
| before | 目标元素外部、之前 | 兄弟节点 |
| prepend | 目标元素内部、最前 | 子节点 |
| after | 目标元素外部、之后 | 兄弟节点 |
| append | 目标元素内部、最后 | 子节点 |
再说before和insertBefore。这两个方法效果类似，但主语和宾语的方向刚好相反。A.before(B)表示把B插到A前面，而B.insertBefore(A)也是把B插到A前面，最终结果一样，但链式调用时返回的jQuery对象不同：before返回的是A的集合，insertBefore返回的是B的集合。看代码：
<div id="box">盒子</div>
<script>
// 两种写法结果相同，但返回值不同
var r1 = $("#box").before("<p>方式一</p>"); // r1 指向 #box
var r2 = $("<p>方式二</p>").insertBefore("#box"); // r2 指向新插入的 p
</script>如果后续要对新插入的元素继续操作，用insertBefore更顺手，因为返回值直接就是新元素；如果后续要对目标元素操作，用before更合适。选哪个主要看链式调用的方向，功能上没有优劣之分。
常见误区与避坑建议
第一个大坑是误把before当成prepend用。有些开发者想在某个容器内最前面加内容，写成了container.before(content)，结果内容跑到了容器外面，样式全乱了。判断标准很简单：新内容应该出现在容器内部就用prepend，出现在容器外面就用before。
第二个坑是传入已存在的元素导致节点被移动。比如页面里有一个提示框元素，你用$("#target").before($("#tip"))把它插到目标前面，tip原本的位置就会失去这个元素。如果需要的是复制而不是移动，应该配合clone()使用：
<div id="tip">提示信息</div>
<div id="target">目标</div>
<script>
// 直接传对象：tip 会被移动
$("#target").before($("#tip"));
// 想保留原位置，先克隆一份
$("#target").before($("#tip").clone());
</script>第三个坑是批量插入时的重复问题。当选择器匹配多个元素时，传入同一个DOM对象或同一个jQuery对象，jQuery会为每个匹配位置分别插入。如果传的是字符串倒还好理解，但传已有元素时行为容易出乎意料，多个目标会共享同一引用，最终可能只有最后一个目标真正拿到了元素，前面的位置落空。遇到多目标插入需求，最稳妥的做法是循环内部每次clone()再插入。
第四个坑是忽略返回值方向导致链式调用出错。前面说过before返回的是目标元素集合，如果你紧接着对返回值执行addClass，加的类会落在目标元素上而不是新插入的元素上。养成习惯：链式操作前先想清楚当前链上拿着的是谁，必要时改用insertBefore来切换链的方向。
总结一下，before方法核心记住三点就够了：插入的是兄弟节点、参数支持函数和jQuery对象、返回值是原目标集合。分清它和prepend、insertBefore的边界，插入前想清楚是移动还是复制，日常DOM操作基本就不会踩坑了。
jQuery beforebefore方法jQuery插入节点修改时间：2026-09-13 16:08:46