jquery添加元素

添加新元素到DOM中

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

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

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

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

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

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

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

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

$("#target").before("<span>新span</span>");

创建新元素

可以使用jQuery直接创建新元素对象：

var newElement = $("<div>", {
  "class": "new-class",
  "text": "这是新创建的div",
  "css": {
    "color": "red"
  }
});
$("body").append(newElement);

插入现有元素

可以将现有元素移动到DOM中的新位置：

var movedElement = $("#element-to-move");
$("#new-location").append(movedElement);

批量添加元素

可以使用循环或数组方法批量添加多个元素：

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

链式操作

jQuery支持链式调用，可以连续执行多个操作：

$("#container")
  .append("<h2>标题</h2>")
  .find("h2")
  .css("color", "blue");

性能优化

当需要添加大量元素时，建议使用文档片段(document fragment)：

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