jquery添加元素

jQuery 添加元素的方法

使用 jQuery 可以方便地在 DOM 中动态添加元素。以下是几种常用的方法：

append()
将内容插入到选定元素的内部末尾。

$("#container").append("<p>新段落</p>");

prepend()
将内容插入到选定元素的内部开头。

$("#container").prepend("<p>新段落</p>");

after()
在选定元素之后插入内容（同级）。

$("#target").after("<div>新内容</div>");

before()
在选定元素之前插入内容（同级）。

$("#target").before("<div>新内容</div>");

html()
替换选定元素的内部 HTML 内容。

$("#container").html("<p>全新内容</p>");

text()
设置或获取选定元素的文本内容（不解析 HTML）。

$("#container").text("纯文本内容");

动态创建元素

可以先用 jQuery 创建元素对象，再插入到 DOM 中：

var newElement = $("<div>", {
  id: "newDiv",
  class: "box",
  text: "动态创建的 div"
});
$("#container").append(newElement);

链式操作

jQuery 支持链式调用，可连续添加多个元素：

$("#container")
  .append("<p>第一段</p>")
  .append("<p>第二段</p>");

注意事项

• 插入内容可以是 HTML 字符串、DOM 元素或 jQuery 对象
• 使用 appendTo() 可反转操作主体（$("<p>新内容</p>").appendTo("#container")）
• 批量添加元素时建议使用文档片段（DocumentFragment）优化性能