jquery 添加

以下是关于使用 jQuery 添加元素的几种常见方法，涵盖动态内容操作和 DOM 结构修改：

添加内容到现有元素

使用 .append() 或 .appendTo() 在指定元素内部末尾插入内容：

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

使用 .prepend() 或 .prependTo() 在元素内部开头插入内容：

$("#target").prepend("<p>首行内容</p>");
$("<p>首行内容</p>").prependTo("#target");

在元素外部插入内容

使用 .after() 或 .insertAfter() 在元素之后插入内容：

$("#target").after("<div>后续元素</div>");
$("<div>后续元素</div>").insertAfter("#target");

使用 .before() 或 .insertBefore() 在元素之前插入内容：

$("#target").before("<div>前置元素</div>");
$("<div>前置元素</div>").insertBefore("#target");

动态创建元素

通过字符串直接创建新元素并添加到 DOM：

var newElement = $("<div>", {
  class: "dynamic-class",
  text: "动态生成的内容",
  css: { color: "red" }
});
$("body").append(newElement);

批量添加元素

结合循环或数组数据批量生成内容：

var items = ["Item 1", "Item 2", "Item 3"];
$.each(items, function(index, value) {
  $("<li>").text(value).appendTo("#list");
});

注意事项

• 使用 .html() 会覆盖原有内容，而 .append() 是追加
• 动态添加的元素如需事件绑定，应使用事件委托：

  $(document).on("click", ".dynamic-element", function() {
  alert("点击事件生效");
  });

• 性能优化：批量操作时建议先构建片段再一次性插入：

  var fragment = $();
  for(var i=0; i<100; i++){
  fragment = fragment.add($("<div>").text("Item "+i));
  }
  $("#container").append(fragment);