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()方法处理动态添加的元素事件绑定。
通过以上方法，可灵活实现内容的动态追加与页面结构更新。
