jquery添加子元素

使用append()方法添加子元素

append()方法将指定内容插入到匹配元素的内部末尾。适用于动态添加列表项、表格行等场景。

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

示例：向无序列表中添加新项

$("ul").append("<li>新列表项</li>");

使用prepend()方法在开头添加子元素

prepend()将内容插入到匹配元素的内部开头，适合需要置顶显示的场景。

$("#parentElement").prepend("<span>优先显示的内容</span>");

使用appendTo()方法反向添加

appendTo()将匹配元素插入到目标元素的内部末尾，语法结构与append()相反。

$("<p>动态段落</p>").appendTo("#container");

使用html()方法替换或添加内容

html()可完全替换父元素内容，若需保留原有子元素，需结合现有内容拼接。

$("#target").html($("#target").html() + "<button>新增按钮</button>");

动态创建复杂元素并附加

通过链式操作创建带属性的子元素，提升代码可读性。

$("<a>", {
  href: "https://example.com",
  text: "链接文本",
  class: "external-link"
}).appendTo("#linkContainer");

注意事项

• 频繁操作DOM时建议缓存父元素选择器，如var $parent = $("#parent");
• 批量添加子元素时，优先构建完整HTML字符串再一次性插入，减少重绘次数
• 事件委托需使用on()方法，直接添加的元素不会自动绑定事件