jquery 追加

jQuery 追加元素的方法

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

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

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

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

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

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

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

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

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

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

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

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

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

动态创建并追加元素

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

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

追加多个元素

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

$("#target").append(
  $("<div>").text("元素1"),
  $("<div>").text("元素2"),
  $("<div>").text("元素3")
);

注意事项

• 确保 DOM 完全加载后再执行 jQuery 操作，可以将代码放在 $(document).ready() 中
• 频繁操作 DOM 会影响性能，建议批量操作
• 可以使用链式调用简化代码

这些方法提供了灵活的选项来操作 DOM 结构，根据需要选择合适的方法。