jquery添加子节点

jQuery 添加子节点的方法

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

append() 方法

append() 方法在选定元素的内部末尾插入内容。可以插入 HTML 字符串、DOM 元素或 jQuery 对象。

// 示例 1：插入 HTML 字符串
$("#parent").append("<div>新的子节点</div>");

// 示例 2：插入 DOM 元素
var newElement = document.createElement("div");
newElement.textContent = "新的子节点";
$("#parent").append(newElement);

// 示例 3：插入 jQuery 对象
var $newElement = $("<div>").text("新的子节点");
$("#parent").append($newElement);

prepend() 方法

prepend() 方法在选定元素的内部开头插入内容，用法与 append() 类似。

$("#parent").prepend("<div>新的子节点</div>");

appendTo() 方法

appendTo() 方法与 append() 功能相同，但语法结构相反，将目标元素插入到指定父元素中。

$("<div>新的子节点</div>").appendTo("#parent");

prependTo() 方法

prependTo() 方法与 prepend() 功能相同，语法结构与 appendTo() 类似。

$("<div>新的子节点</div>").prependTo("#parent");

html() 方法

html() 方法可以设置元素的 HTML 内容，会覆盖原有内容。若需保留原有内容，需先获取再拼接。

// 覆盖原有内容
$("#parent").html("<div>新的子节点</div>");

// 保留原有内容
var currentHtml = $("#parent").html();
$("#parent").html(currentHtml + "<div>新的子节点</div>");

动态创建并插入节点

可以链式调用 jQuery 方法动态创建节点并设置属性，再插入到父元素中。

$("<div>")
  .addClass("child")
  .text("动态创建的子节点")
  .appendTo("#parent");

注意事项

• 插入内容时需确保父元素已存在于 DOM 中，否则操作无效。
• 频繁操作 DOM 可能影响性能，建议批量操作或使用文档片段优化。
• 使用 html() 方法时会覆盖原有内容，需谨慎使用。