before() 方法负责在选中元素的外部、紧挨着它的前面，塞入指定的内容。注意，内容是被添加到元素之外，不是内部。这个和 prepend() 有本质区别——一个在元素前面加兄弟节点，一个在元素内部的开头加子节点。
老一点的 jQuery 文档里有时会提到 insertBefore()，它的功能和 before() 一样，区别只在于语法的主客体顺序调了个。before() 是“在被选元素前插入内容”，insertBefore() 是“把内容插入到目标元素前”。我实际写项目时，用 before() 的频次远高于 insertBefore()，因为前者读起来更符合操作直觉，链式调用也更自然。
语法结构
$(selector).before(content, function(index));
-
content：要插入的内容。可以是 HTML 字符串、jQuery 对象、DOM 元素，甚至是多个用逗号分隔的内容项。
-
function(index)：可选参数。一个返回待插入内容的回调函数。
index参数代表当前元素在匹配中的索引位置，从 0 开始。
当传入的参数是纯文本字符串时，before() 会把它当成文本来处理，HTML 标签不会被解析。如果你想让标签生效，就得包装成完整的 HTML 字符串或 jQuery 对象传进去。
实战示例
示例一：基础插入——在段落前添加提示语
<div class="content-area">
<p class="article">前端工程化是2026年技术团队关注的重点方向之一。</p>
<p class="article">模块化开发能显著提升代码的可维护性。</p>
</div>
<button id="addTipBtn">在段落前插入提示</button>
<script>
$("#addTipBtn").on("click", function() {
$(".article").before("<p class='tip'><strong>编者注：</strong>以下内容来自技术专栏</p>");
});
</script>
点击按钮后，每段 class="article" 的段落前都会出现一条带加粗文字的提示行。两段文章各自获得一个独立的提示前缀。
示例二：用回调函数动态生成插入内容
回调函数的妙处在于，可以根据每个元素的位置或上下文来定制不同的插入内容。
<ul class="task-list">
<li>搭建项目脚手架</li>
<li>编写核心业务逻辑</li>
<li>进行代码审查</li>
</ul>
<button id="numberBtn">给任务编序号</button>
<script>
$("#numberBtn").on("click", function() {
$(".task-list li").before(function(index) {
return "<span class='task-num'>任务" + (index + 1) + "：</span>";
});
});
</script>
这里 index 从 0 递增，我们加 1 后拼出“任务1：”“任务2：”这样的序号标签，插入到每个 <li> 前面。相比于写死一串静态标签，这种写法让内容随列表长度自动适配。
示例三：插入已有的 DOM 元素
before() 还能把页面上已经存在的元素挪过来。这时候传入的是 jQuery 对象，效果是移动而非复制。
<div id="notice" style="background:#fff3cd;padding:8px;margin-bottom:10px;">
系统将在晚间进行维护升级
</div>
<hr>
<p class="main-text">正文第一段。</p>
<button id="moveNoticeBtn">把公告挪到正文前</button>
<script>
$("#moveNoticeBtn").on("click", function() {
$(".main-text").first().before($("#notice"));
});
</script>
点击按钮后，公告 #notice 从原来的位置移动到第一个 .main-text 段落的上方。这里用的是 DOM 元素引用，不是字符串，所以公告节点被直接搬迁，而不是克隆。
before() 与兄弟方法的关系
和 before() 方向相反的是 after()，往元素后面插入。操作元素内部的则有 prepend()（插入到内部最前）和 append()（插入到内部末尾）。我在刚接触时经常混淆 before() 和 prepend()，后来记了一个简单的口诀：“before 是外前，prepend 是内前”。外部前面 vs 内部最前，场景不同。
至于 insertBefore()，它的写法是 $(content).insertBefore(target)，主体是内容。功能等同于 $(target).before(content)。选哪个取决于你的链式调用习惯和代码可读性。我个人倾向统一用 before()，让选择器主语始终是页面上已有的目标元素，逻辑更顺。
本节课程知识要点
-
before()插入的内容在目标元素的外部前方，是兄弟节点关系，不要和内部插入方法混淆。 -
插入 HTML 字符串时，内容里的
<script>标签不会自动执行，jQuery 会剥离后再插入 DOM，这点对安全性有帮助。 -
利用回调函数
function(index)可以根据元素位置动态创建插入内容，处理列表类场景效率很高。 -
传入已有的 jQuery 对象或 DOM 元素时，原节点会被移动而不是复制。如果希望保留原位置的内容，应该先用
.clone()方法生成副本再传入。 -
链式调用时，
before()返回的是原来的选择器对象，而不是刚插入的内容，这让你可以继续在原始目标上做后续操作。
