append() 是 jQuery 中一个非常强大的函数，用于向选定的元素内部添加新的内容。这个函数在动态网页开发中非常常用，因为它可以在不需要重新加载整个页面的情况下更新页面内容。

基本用法

append(content) 方法将指定的内容添加到每个匹配的元素内部的末尾。content 可以是一个或者多个 HTML 字符串、DOM 元素、jQuery 对象，甚至是由函数返回的内容。

// 使用 HTML 字符串 $("#container").append("<p>这是一个新的段落。</p>"); // 使用 DOM 元素 var newElement = document.createElement("div"); newElement.innerHTML = "这是一个新的 DIV 元素。"; $("#container").append(newElement); // 使用 jQuery 对象 var $newElement = $("<span>这是一个新的 SPAN 元素。</span>"); $("#container").append($newElement); // 使用函数来动态生成内容 $("#container").append(function(index, html) { return "<p>段落 " + index + ": " + html + "</p>"; });

多元素操作

jQuery 的强大之处在于其可以同时操作多个 DOM 元素。append() 方法也不例外。如果选择器匹配到多个元素，append() 方法会对所有匹配的元素执行操作。

<div class="item"></div> <div class="item"></div> <div class="item"></div> <script> $(".item").append("<span>附加的内容</span>"); </script>

上述代码会为每个 .item 元素追加一个 <span>。

性能考虑

在需要高频率 DOM 更新的应用场景中，例如渲染大量数据行，使用 append() 的频率要慎重。频繁操作 DOM 会对性能造成影响，因为每次 DOM 的更改都会导致页面的重绘和重排。这种情况下，一个优化策略是，首先在内存中创建一个文档片段（fragment)，将所有待插入的元素在片段中处理完后，再一次性使用 append() 将片段插入 DOM。这样可以减少重绘的次数。

var fragment = $(document.createDocumentFragment()); for (var i = 0; i < 1000; i++) { $("<p>第 " + i + " 行文本</p>").appendTo(fragment); } $("#container").append(fragment);

方法链

jQuery 提供的方法链功能使得代码更为简洁。由于 append() 返回的是调用它的 jQuery 对象，因此可以继续链式调用其他 jQuery 方法。

$("#list") .append("<li>*行</li>") .append("<li>第二行</li>") .css("color", "red");

与其他 DOM 操作方法的比较

与 append() 类似的还有其他 DOM 操作方法，例如 prepend()、after() 和 before()：

prepend(content): 将内容插入到每个匹配元素的内部前面。 after(content): 在每个匹配元素之后插入内容。 before(content): 在每个匹配元素之前插入内容。 $("#element").prepend("<p>前置文本</p>"); $("#element").after("<p>后置文本</p>"); $("#element").before("<p>出现在之前的文本</p>");

总体来说，选择合适的 DOM 操作方法可以帮助实现更为直观的代码逻辑。

使用注意事项

HTML 字符串的解析: 传递给 append() 的 HTML 字符串会被解析，生成相应的 DOM 元素并插入到文档中。这意味着 HTML 中的脚本标签可能会被执行，这需要特别小心以避免XSS攻击。

保持语义化: 不要为了使用 append() 而改变页面的语义结构。保持 HTML 的语义化对 seo 以及页面可访问性都非常重要。

事件处理: 使用 append() 添加的内容不会继承原有的事件绑定。这是因为事件绑定发生在元素插入之前。可以考虑使用事件委托，或在元素插入后重新绑定事件。

复杂的 HTML 结构: 对于较为复杂的 HTML 结构，建议使用模板引擎（如 Handlebars.js、Vue.js 模板等）来生成内容，再用 append() 插入。这不仅提升了代码的可读性，还能与更复杂的应用逻辑良好结合。

通过合理使用 append()，你可以极大地提升网页的交互能力，让用户在不刷新页面的情况下获得更新的信息。但同时也要注意性能和安全方面的问题。