jquery添加子元素

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

append()方法将指定内容插入到匹配元素的内部末尾位置。

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

示例：动态添加列表项

$("#myList").append("<li>新增项目</li>");

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

prepend()将内容插入到匹配元素的内部起始位置。

$("#parentElement").prepend("<div>第一个子元素</div>");

使用appendTo()方法反向添加

将目标元素追加到指定父元素中，语法结构与append()相反。

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

使用html()或innerHTML替换内容

html()会替换元素内所有子元素，需谨慎使用。

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

动态创建元素并添加属性

可结合DOM元素创建与属性设置：

var newElement = $("<a>", {
  href: "https://example.com",
  text: "点击访问"
});
$("#container").append(newElement);

注意事项

• 频繁操作DOM可能影响性能，建议批量操作或使用文档片段。
• 事件委托更适合动态添加元素的交互处理。
• jQuery也支持after()和before()，但它们是插入兄弟元素而非子元素。