prepend() 方法的作用很明确：在选中元素的内部、作为第一个子节点，插入指定的内容。它和 append() 正好相对，一个往内部最前面加，一个往内部之后面加。
我刚接触 jQuery 那阵子，prepend() 和 before() 经常写混。后来记了一个区分标准——看内容之后落在哪里。prepend() 是在元素内部的开头插入，新内容成为该元素的第一个子元素。而 before() 是在元素外部的前方插入，新内容成为该元素的前一个兄弟节点。这个区别决定了后续 CSS 样式和 DOM 遍历的生效范围，用错的话布局可能直接乱掉。
语法结构
$(selector).prepend(content, function(index, html));
-
content：必填参数。可以是 HTML 字符串、jQuery 对象、DOM 元素。这三种类型的行为略有不同，后面示例会细讲。
-
function(index, html)：可选参数。一个回调函数，返回要插入的内容字符串。
index是元素在匹配中的索引位置，html是当前元素的原始 HTML 内容。拿html参数做拼接时要注意，它包含元素内部已有的全部标记，修改后直接返回就能覆盖式替换。
示例演练
示例一：向段落前部添加标签文字
<p class="msg-line">系统运行正常</p>
<p class="msg-line">数据库连接稳定</p>
<button id="tagBtn">打上状态标签</button>
<script>
$("#tagBtn").on("click", function() {
$(".msg-line").prepend("<strong>[运行中]</strong> ");
});
</script>
点击按钮后，两个段落内部的文字前面都会多出一个加粗的 [运行中] 标签。因为是插在 <p> 内部开头，所以标签和原文字在同一行，受 <p> 的样式影响。
示例二：向列表动态插入序号
有序列表 <ol> 本身会自动编号，但如果用的是 <ul>，或者想把序号写成自定义格式，用 prepend() 配合回调函数就很顺手。
<ul class="skill-list">
<li>HTML 语义化</li>
<li>CSS 布局模型</li>
<li>JavaScript 异步编程</li>
</ul>
<button id="numberBtn">生成序号</button>
<script>
$("#numberBtn").on("click", function() {
$(".skill-list li").prepend(function(index) {
return "<span class='no'>[" + (index + 1) + "]</span> ";
});
});
</script>
每个 <li> 内部开头入了 [1] [2] [3] 这样的序号标签。回调里的 index 从 0 开始，加 1 后就是自然的顺序数。这里没有用 html 参数，因为任务只跟位置有关，和原内容无关。
示例三：插入已有的 DOM 元素（移动节点）
如果传给 prepend() 的是一个页面上已存在的 jQuery 对象或 DOM 元素，效果是把这个节点移动过去，而不是复制。
<div id="alertBox" style="background:#ffe0e0;padding:6px;margin-bottom:8px;">
这条重要通知将被挪进文章区。
</div>
<article class="post-body">
<p>2026年，前端工具链的演进仍在加速。</p>
</article>
<button id="moveBtn">把通知移到文章内部前部</button>
<script>
$("#moveBtn").on("click", function() {
$(".post-body").prepend($("#alertBox"));
});
</script>
点按钮后，#alertBox 从原来的位置被移到了 article.post-body 内部的第一个位置。如果原本在 article 外面，它就会跑进 article 里面并排在最前面。需要保留原位置的节点时，记得先用 .clone() 生成副本再传入。
prepend() 和 prependTo() 的区别
两者功能一致，只是主语和宾语的位置颠倒了：
-
$(target).prepend(content)——以目标元素为主语，把内容插入到目标内部前部。 -
$(content).prependTo(target)——以内容为主语，把内容自身插入到目标内部前部。
项目开发中我基本只用 prepend()，因为链式调用时保持“先选中目标，再操作目标”的语序，逻辑更顺畅。prependTo() 在变量引用内容节点时偶尔会见，但可读性不如前者直接。
本节课程知识要点
-
prepend()操作的是元素内部第一个子节点的位置，不要和外部插入的before()搞混。遇事不决时打开浏览器开发者工具看 DOM 结构，一眼就能确认。 -
传入 HTML 字符串时，其中的内联
<script>标签会被 jQuery 过滤掉不执行，这是出于安全考虑。但事件属性如onclick同样不要硬编码在插入的字符串里，应该用事件委托或后续绑定。 -
回调函数版本的
prepend(function(index, html))适合需要基于元素位置或原始内容做动态拼接的场景。html参数拿到的是当前元素的 innerHTML，大量文本时注意性能开销。 -
插入已有 DOM 节点时，节点会被移动而非克隆。多目标选择器下，同一个节点只能插入到一个位置，jQuery 会把它放在第一个匹配目标里，后续目标不受影响。
-
和
append()对照起来记：prepend()插在最前面，append()插在之后面。两者覆盖了元素内部内容的前后增补需求。
