在jQuery的DOM插入方法里，append()属于高频使用的一个。它的作用很明确——把指定内容添加到每个匹配元素内部的之后面，也就是成为该元素的之后一个子节点。这个方法在与after()做对比时经常被提及，但两者操作的位置不同：一个在内部末尾加东西，一个在外部后面加兄弟节点。
语法结构
$(selector).append(content, function(index, html))
参数说明
-
content（必需）：要插入的内容，可以是HTML字符串、jQuery对象或者DOM元素
-
function(index, html)（可选）：回调函数，返回要追加的内容
-
index：当前元素在jQuery中的索引位置
-
html：当前元素的现有HTML内容
-
基础示例
假设页面有以下HTML结构：
<ul id="courseList">
<li>JavaScript基础</li>
<li>CSS布局</li>
</ul>
<button id="addCourse">添加课程</button>
对应的jQuery代码：
$("#addCourse").click(function() {
$("#courseList").append("<li>jQuery DOM操作</li>");
});
每次点击按钮，<li>jQuery DOM操作</li>就会被追加到列表末尾，成为#courseList的之后一个子元素。这跟after()不同——after()会把新元素放在<ul>外面，而append()放进<ul>里面。
回调函数的实用场景
append()的回调函数参数很有用，尤其是需要根据元素当前状态动态生成内容时。举个例子，你有一组文章摘要，想给每篇末尾追加浏览次数：
$("article").append(function(index, html) {
var viewCount = 100 + index * 50;
return "<span class='views'> 浏览" + viewCount + "次</span>";
});
这里html参数拿到了每篇文章的当前内容，你可以基于它做判断或拼接。index从0开始，正好可以用来生成递增的编号或模拟数据。
本节课程知识要点
在开发中，我建议尽量用append()来构建DOM结构，而不是手动拼接HTML字符串再赋给innerHTML。虽然两者的结果看起来差不多，但append()不会破坏元素上已有的事件绑定和表单状态。比如一个输入框里用户已经打了字，你用innerHTML去更新它的父容器，输入框会被重建，用户输入的内容就丢了。append()操作的是增量更新，不影响已有的DOM节点和它们的状态。
append()和appendTo()的关系
这两个方法做的事情一模一样，区别在于主语和宾语的顺序，跟after()与insertAfter()的关系如出一辙。
// append()：目标元素在左边，内容在右边
$("#container").append("<div>新内容</div>");
// appendTo()：内容在左边，目标元素在右边
$("<div>新内容</div>").appendTo("#container");
选哪个主要看链式调用的方向。append()返回的是目标元素的jQuery对象，适合继续操作容器本身；appendTo()返回的是入内容的jQuery对象，适合对新增元素做后续处理。我写动态表单时经常用appendTo()，因为添加新表单项后一般要接着绑定事件或设置样式：
$("<input type='text' class='dynamic-field'>")
.appendTo("#formGroup")
.focus()
.addClass("highlight");
这种链式写法一气呵成，不用再回头去选中刚加的元素。
个人经验：避免频繁操作DOM
一个容易被忽视的性能问题是，在循环里连续调用append()会导致页面回流多次。如果一次性要追加多个元素，先把它们拼接成完整的HTML字符串，再一次性append()进去。或者用文档片段（DocumentFragment）暂存，之后统一插入。我早期写一个表格生成功能，循环里逐行append()，数据几百条时页面直接卡了几秒，改成字符串拼接后瞬间渲染。
常见错误
初学者有时会混淆append()和after()，给列表写追加功能却用了after()，结果新项目跑到列表外面去了，样式全乱。记住一个简单的判断方法：如果你想扩展容器内部的子元素，用append()；如果想在容器外面紧挨着放东西，用after()。
小结
append()是jQuery DOM内部插入的基础方法，配合prepend()（内部最前面插入）、after()（外部后面插入）、before()（外部前面插入），这四件套覆盖了所有常见的元素插入需求。搞懂每个方法操作的位置和返回值的指向，就能在写代码时准确选择合适的那个，不用每次都翻文档确认。
