jquery追加子元素

jQuery 追加子元素的方法

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

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

$("#parent").append("<div>新子元素</div>");

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

$("#parent").prepend("<div>新子元素</div>");

appendTo()
将目标元素插入到指定父元素的末尾。

$("<div>新子元素</div>").appendTo("#parent");

prependTo()
将目标元素插入到指定父元素的开头。

$("<div>新子元素</div>").prependTo("#parent");

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

$("#parent").html("<div>新子元素</div>");

after() 和 before()
虽然它们不是直接追加子元素，但可以在目标元素的相邻位置插入内容。

$("#child").after("<div>同级元素</div>");
$("#child").before("<div>同级元素</div>");

动态创建并追加子元素

可以结合 jQuery 的 DOM 创建方法动态生成元素并追加。

var newElement = $("<div>", {
  text: "动态创建的子元素",
  class: "child-class"
});
$("#parent").append(newElement);

注意事项

• 确保目标父元素存在，否则操作无效。
• 使用字符串或 jQuery 对象作为参数均可。
• 多次调用 append() 或 prepend() 会连续添加子元素。