jquery添加

jQuery 添加元素的方法

在jQuery中，可以通过多种方式向DOM中添加新元素或内容。以下是几种常用的方法：

append() 将内容插入到选定元素的内部末尾处。适用于在元素内部最后添加子元素。

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

prepend() 将内容插入到选定元素的内部开头处。适用于在元素内部最前添加子元素。

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

after() 在选定元素之后插入内容。适用于在元素外部紧接着添加兄弟元素。

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

before() 在选定元素之前插入内容。适用于在元素外部紧接着添加兄弟元素。

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

html() 替换选定元素内的所有内容。如果只需要替换内容而不是追加，可以使用此方法。

$("#container").html("<div>全新内容</div>");

text() 设置或获取选定元素的文本内容。与html()不同，text()不会解析HTML标签。

$("#container").text("纯文本内容");

动态创建元素

除了直接插入HTML字符串，还可以先创建jQuery对象再插入：

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

链式操作

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

$("#parent")
  .append("<div>第一个元素</div>")
  .append("<div>第二个元素</div>");

性能考虑

当需要添加大量元素时，建议先将所有元素组合成一个片段再一次性插入DOM，而不是多次操作DOM：

var fragment = $("<div>");
for(var i=0; i<100; i++){
  fragment.append("<div>项目"+i+"</div>");
}
$("#container").append(fragment);

这些方法提供了灵活的DOM操作能力，可以根据具体需求选择最合适的方式添加元素。