jquery追加html

jQuery 追加 HTML 的方法

使用 jQuery 可以方便地向 DOM 中追加 HTML 内容。以下是几种常用的方法：

append() 将内容插入到选定元素的内部末尾处

$("#target").append("<div>新内容</div>");

prepend() 将内容插入到选定元素的内部开头处

$("#target").prepend("<div>新内容</div>");

after() 在选定元素之后插入内容

$("#target").after("<div>新内容</div>");

before() 在选定元素之前插入内容

$("#target").before("<div>新内容</div>");

html() 替换选定元素内的所有内容

$("#target").html("<div>完全替换的内容</div>");

链式操作示例

jQuery 方法支持链式调用

$("#target")
    .append("<div>第一项</div>")
    .append("<div>第二项</div>");

动态创建元素

可以创建 jQuery 对象后再追加

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

注意事项

• 确保 DOM 完全加载后再执行 jQuery 操作，可将代码放在 $(document).ready() 中
• 频繁操作 DOM 可能影响性能，建议批量处理
• 使用合适的方法根据需求选择内部/外部追加