jQuery 添加元素
动态网页经常要往页面里"塞"新内容：新增一行表格、往列表追加一条、在文章后面补一段提示。jQuery 提供 append()、prepend()、after()、before() 四兄弟来完成各种位置的插入。
先准备一个空列表和一句文字作为容器：
<ul id="list"></ul>
<p id="txt">Hello jQuery</p>
插入位置的四种理解
| 方法 | 插入到哪里 | 比喻 |
|---|---|---|
| append() | 元素内部末尾 | 往盒子里最后放 |
| prepend() | 元素内部开头 | 往盒子最前面放 |
| after() | 元素之后（同级） | 放在盒子右边 |
| before() | 元素之前（同级） | 放在盒子左边 |
先记一句话：append/prepend 进"内部"，after/before 放"旁边"。
append() 与 prepend()：内部插入
append(内容) 把内容追加到选中元素内部的最后，prepend() 则插到最前：
$("#list").append("<li>苹果</li>");
$("#list").append("<li>香蕉</li>");
$("#list").prepend("<li>草莓</li>");
// 效果：列表顺序为：草莓、苹果、香蕉
内容可以是 HTML 字符串、DOM 元素或 jQuery 对象。
after() 与 before()：外部同级插入
after(内容) 把内容插到选中元素之后成为它的下一个兄弟；before() 插到之前：
$("#txt").after("<p>第一段补充</p>");
$("#txt").before("<p>前言</p>");
// 效果：页面从上到下为：前言 / Hello jQuery / 第一段补充
区别提醒：after/before 生成的是并列元素，不会进入 #txt 内部。
用 $() 动态创建元素
先用 $() 把 HTML 字符串变成 jQuery 对象，再插入，方便后续操作：
var newLi = $("<li>").text("葡萄").attr("class", "fruit");
$("#list").append(newLi);
// 效果：列表追加一个 li，内容为"葡萄"，带 class="fruit"
这样创建出的对象还能先绑定事件再插入页面。
综合示例：点按钮加购物车项
<button id="addBtn">加一件</button>
<ul id="cart"></ul>
var n = 1;
$("#addBtn").click(function () {
$("#cart").append("<li>商品" + n + "</li>");
n++;
});
// 效果：每点一次按钮，购物车列表尾部就多一行"商品N"
小结
添加元素四兄弟要分清"内部"与"旁边"：append/prepend 插进内部首尾，after/before 放在外部两侧；配合 $() 动态创建元素，就能随心所欲地往页面添加内容。