jquery追加html

使用 jQuery 追加 HTML 内容的方法

jQuery 提供了多种方法来动态追加 HTML 内容到 DOM 元素中。以下是几种常用的方法：

append()
将内容插入到匹配元素的内部末尾处。

$("#targetElement").append("<div>追加的内容</div>");

prepend()
将内容插入到匹配元素的内部开头处。

$("#targetElement").prepend("<div>前置的内容</div>");

after()
在匹配元素之后插入内容（作为同级元素）。

$("#targetElement").after("<div>插入到后面的内容</div>");

before()
在匹配元素之前插入内容（作为同级元素）。

$("#targetElement").before("<div>插入到前面的内容</div>");

html()
替换匹配元素的内部 HTML 内容（会覆盖原有内容）。

$("#targetElement").html("<div>替换全部内容</div>");

appendTo()
将指定内容追加到目标元素的末尾（与 append() 方向相反）。

$("<div>追加的内容</div>").appendTo("#targetElement");

动态生成并追加复杂 HTML

可以通过字符串拼接或模板字面量生成复杂 HTML 结构后追加：

const dynamicHTML = `
  <ul>
    <li>项目1</li>
    <li>项目2</li>
  </ul>
`;
$("#container").append(dynamicHTML);

性能优化建议

批量操作 DOM 时，建议先构建完整 HTML 字符串再一次性追加，而非多次操作 DOM。频繁的 DOM 操作会影响页面性能。