jquery添加内容

使用append()方法添加内容

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

$("#targetElement").append("<p>新增内容</p>");

使用prepend()方法添加内容

prepend()方法将内容插入到匹配元素的内部开头。适合在已有内容前插入新元素。

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

使用after()方法插入同级内容

after()在匹配元素之后插入同级内容，不影响元素内部结构。

$("#referenceElement").after("<span>后续内容</span>");

使用before()方法插入同级内容

before()在匹配元素之前插入同级内容，与after()方向相反。

$("#referenceElement").before("<span>前置内容</span>");

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

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

$("#targetElement").html($("#targetElement").html() + "<p>追加内容</p>");

动态创建元素并添加

通过jQuery创建新元素对象，再使用上述方法插入。

var newDiv = $("<div>", { 
  class: "dynamic-class",
  text: "动态生成的元素" 
});
$("#container").append(newDiv);

注意事项

• 插入内容需确保DOM已加载，建议将代码放在$(document).ready()中。
• 频繁操作DOM可能影响性能，建议批量处理或使用文档片段优化。