jquery添加节点

使用 jQuery 添加节点的方法

使用 append() 方法

append() 方法将内容插入到指定元素的内部末尾。

$("#parentElement").append("<div>新节点</div>");

使用 prepend() 方法

prepend() 方法将内容插入到指定元素的内部开头。

$("#parentElement").prepend("<div>新节点</div>");

使用 after() 方法

after() 方法将内容插入到指定元素的外部后面。

$("#targetElement").after("<div>新节点</div>");

使用 before() 方法

before() 方法将内容插入到指定元素的外部前面。

$("#targetElement").before("<div>新节点</div>");

使用 appendTo() 方法

appendTo() 方法将选定的元素插入到目标元素的内部末尾。

$("<div>新节点</div>").appendTo("#parentElement");

使用 prependTo() 方法

prependTo() 方法将选定的元素插入到目标元素的内部开头。

$("<div>新节点</div>").prependTo("#parentElement");

使用 insertAfter() 方法

insertAfter() 方法将选定的元素插入到目标元素的外部后面。

$("<div>新节点</div>").insertAfter("#targetElement");

使用 insertBefore() 方法

insertBefore() 方法将选定的元素插入到目标元素的外部前面。

$("<div>新节点</div>").insertBefore("#targetElement");

动态创建节点

可以结合 jQuery 的 DOM 创建方法动态生成节点。

var newNode = $("<div>", {
  class: "new-class",
  text: "动态创建的节点"
});
$("#parentElement").append(newNode);

注意事项

• 确保 DOM 加载完成后再执行操作，可以将代码放在 $(document).ready() 中。
• 避免频繁操作 DOM，批量操作时建议使用文档片段或一次性插入。

以上方法覆盖了 jQuery 中添加节点的常见场景，根据具体需求选择合适的方式。