jquery添加子节点

jQuery 添加子节点的方法

在 jQuery 中，可以通过多种方式向 DOM 元素添加子节点。以下是几种常见的方法：

append() 将内容插入到目标元素的末尾（作为最后一个子节点）。

$("#parent").append("<div>子节点内容</div>");

prepend() 将内容插入到目标元素的开头（作为第一个子节点）。

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

appendTo() 将选中的元素追加到目标元素的末尾（与 append() 方向相反）。

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

prependTo() 将选中的元素追加到目标元素的开头（与 prepend() 方向相反）。

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

html() 替换目标元素的所有子节点内容。

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

after() 和 before() 虽然不是严格意义上的子节点操作，但可以用于在目标元素前后插入兄弟节点。

$("#parent").after("<div>兄弟节点（后）</div>");
$("#parent").before("<div>兄弟节点（前）</div>");

注意事项

• 使用 append() 或 prepend() 时，可以传入 HTML 字符串、DOM 元素或 jQuery 对象。
• 若需保留现有子节点，避免使用 html()，因为它会覆盖原有内容。
• 动态生成的子节点可以通过事件委托（如 on()）绑定事件。