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()方法时会覆盖原有内容，需谨慎使用。
