jquery 追加

jQuery 追加元素的方法

使用 jQuery 可以方便地向 DOM 中追加元素。以下是几种常见的追加方法：

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

$("#target").append("<p>新追加的内容</p>");

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

$("#target").prepend("<p>新追加的内容</p>");

after() 在选定元素之后插入内容。

$("#target").after("<p>新追加的内容</p>");

before() 在选定元素之前插入内容。

$("#target").before("<p>新追加的内容</p>");

appendTo() 将选定元素追加到目标元素的内部末尾。

$("<p>新追加的内容</p>").appendTo("#target");

prependTo() 将选定元素追加到目标元素的内部开头。

$("<p>新追加的内容</p>").prependTo("#target");

动态创建并追加元素

可以动态创建 jQuery 对象然后追加：

var newElement = $("<div>", {
  "class": "new-class",
  "text": "动态创建的内容"
});
$("#target").append(newElement);

追加多个元素

可以一次性追加多个元素：

$("#target").append(
  $("<p>段落1</p>"),
  $("<p>段落2</p>"),
  $("<p>段落3</p>")
);

注意事项

• 确保 DOM 已加载完成再执行追加操作，可以将代码放在 $(document).ready() 中
• 频繁操作 DOM 会影响性能，建议批量处理
• 追加 HTML 字符串时要注意 XSS 安全问题