动态添加内容需区分内部插入（append/prepend）与外部插入（after/before）：前者使新元素成为目标子元素，后者使其成为同级兄弟节点，选错将导致结构错乱、样式失效。
要在网页中动态添加新内容，必须分清元素是该塞进目标容器里，还是该摆在目标元素旁边——选错方法会导致结构错乱、样式失效或后续脚本查不到节点。
理解插入位置的本质区别
先看一个真实 DOM 结构：<div id="box"><p>原始段落</p></div>。对这个 #box 执行不同操作，结果天差地别。
方法一：用 append() 添加 <p>新段落</p> → <div id="box">
<p>原始段落</p>
<p>新段落</p>
</div>。【新元素成为 #box 的子元素】
方法二：用 after() 添加同一段 HTML → <div id="box"><p>原始段落</p></div>
<p>新段落</p>。【新元素与 #box 是同级兄弟节点】
prepend() 则把内容插在目标元素内部最开头，和 append 方向相反，但同样属于“内部插入”。
什么时候必须用 append 或 prepend
当你需要往某个容器末尾或开头追加子元素时，比如动态生成列表项、表单字段、卡片内容块。
第一步：选中目标容器，例如 $("ul.todo-list")。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
第二步：调用 .append("<li>买牛奶</li>")，新 <li> 就会出现在所有已有 <li> 的后面，且严格嵌套在 <ul></ul> 内部。
如果误用 .after("<li>买牛奶</li>")，新 <li> 会孤零零挂在 <ul></ul> 外面，浏览器会自动补全为 <ul></ul>
<li>买牛奶</li>，破坏语义结构，CSS 样式也大概率失效。
什么时候只能用 after 或 before
当你想在某个现有元素的紧邻外部位置插入平级内容，比如在标题后加一条分割线、在图片下方加图注、在按钮组中间插一个分隔符。
方法1：给一张图片加说明文字 —— $("img#avatar").after("<p class="'caption'">用户头像</p>")，<p></p> 会紧贴在 <img> 标签闭合之后，二者同属父容器的直接子节点。
方法2：在导航栏最后一个菜单项后插入“更多”按钮 —— $("nav ul li:last").after("<li class="'more'">⋯</li>")。这一步不能用 append，因为目标不是往 <li> 里面塞东西，而是要在它外面加一个并列的兄弟 <li>。
注意：before/after 操作的对象必须已存在于 DOM 中，否则插入位置无从确定；而 append/prepend 只要父容器存在即可执行。
快速判断口诀与常见误用
打开开发者工具，右键查看元素结构，问自己两个问题：新内容该挂在这个标签“肚子里”，还是该站在这标签“肩膀上”？
肚子里 → 用 append 或 prepend；肩膀上 → 用 after 或 before。
误用典型：想给表格最后一行后面加汇总行，却写了 $("tr:last").append("<tr><td colspan="'3'">合计</td></tr>")。这会让新 <tr> 被塞进旧 <code><tr> 的内部，变成非法嵌套，浏览器强行修正后结构全乱。<p>正确写法是 <code>$("tr:last").after("<tr><td colspan="'3'">合计</td></tr>")，让新行作为同级节点紧跟其后。
