jquery添加节点

使用 jQuery 添加节点的方法

jQuery 提供了多种方法来动态添加节点到 DOM 中。以下是几种常见的方法：

append()

将内容插入到匹配元素的内部末尾。

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

prepend()

将内容插入到匹配元素的内部开头。

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

after()

在匹配元素之后插入内容。

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

before()

在匹配元素之前插入内容。

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

html()

替换匹配元素内的所有内容。

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

appendTo()

将内容追加到指定元素中。

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

prependTo()

将内容前置到指定元素中。

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

insertAfter()

将内容插入到指定元素之后。

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

insertBefore()

将内容插入到指定元素之前。

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

创建新节点的方法

可以先用 jQuery 创建新元素，再插入到 DOM 中：

var newElement = $("<div>", {
  "class": "new-class",
  "text": "动态创建的内容",
  "css": {
    "color": "red"
  }
});

$("#container").append(newElement);

注意事项

• 插入的内容可以是 HTML 字符串或 jQuery 对象
• 多次插入同一个 jQuery 对象会移动该元素而非复制
• 需要复制元素时使用 .clone() 方法
• 操作大量 DOM 时建议使用文档片段(document fragment)提高性能