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");

动态创建并追加元素

可以结合 DOM 创建和追加方法动态添加元素：

var newElement = $("<p>", {
  text: "动态创建的段落",
  class: "highlight"
});
$("#container").append(newElement);

注意事项

• 确保 DOM 完全加载后再执行操作，通常将代码放在 $(document).ready() 中。
• 避免频繁操作 DOM，批量追加更高效。
• 使用链式调用简化代码，例如：

  $("#target")
    .append("<div>第一项</div>")
    .append("<div>第二项</div>");