jquery追加内容

使用 append() 方法追加内容

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

$("#targetElement").append("<p>这是追加的内容</p>");

使用 prepend() 方法在内部开头插入

prepend() 将内容插入到目标元素的内部开头。适合优先显示新内容的情况。

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

使用 after() 方法在元素后插入

after() 在目标元素外部后面插入内容，与兄弟节点平级。常用于插入分隔符或广告位。

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

使用 before() 方法在元素前插入

before() 在目标元素外部前面插入内容。适合添加提示或注释。

$("#targetElement").before("<hr>");

动态追加 HTML 字符串或 DOM 对象

支持直接追加已创建的 jQuery 对象或 DOM 元素，提升性能。

var newDiv = $("<div>").text("动态创建");
$("#container").append(newDiv);

链式操作示例

可结合其他 jQuery 方法连续操作，简化代码。

$("#list")
  .append("<li>项目1</li>")
  .find("li:last")
  .addClass("highlight");

注意事项

• 频繁操作 DOM 可能影响性能，建议批量追加而非循环单次插入。
• 使用 document.createElement 创建元素再转换为 jQuery 对象效率更高。
• 事件委托需配合 on() 方法处理动态添加的元素事件绑定。

通过以上方法，可灵活实现内容的动态追加与页面结构更新。