jquery追加内容

jQuery 追加内容的方法

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

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

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

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

$("#target").prepend("<p>追加的内容</p>");

after() 将内容插入到指定元素的外部后面。

$("#target").after("<p>追加的内容</p>");

before() 将内容插入到指定元素的外部前面。

$("#target").before("<p>追加的内容</p>");

html() 替换指定元素的全部内容。

$("#target").html("<p>替换全部内容</p>");

text() 设置或获取指定元素的文本内容。

$("#target").text("新的文本内容");

动态追加内容示例

可以通过变量或函数动态生成内容并追加：

var dynamicContent = "<div class='item'>动态生成的内容</div>";
$("#container").append(dynamicContent);

追加多个元素

可以一次性追加多个元素：

$("#list").append(
  "<li>项目1</li>",
  "<li>项目2</li>",
  "<li>项目3</li>"
);

链式操作

jQuery 支持链式调用：

$("#content")
  .append("<h3>标题</h3>")
  .append("<p>正文内容</p>");

注意事项

• 确保 DOM 加载完成后再执行 jQuery 操作，可以将代码放在 $(document).ready() 中
• 追加大量内容时考虑性能影响
• 避免重复追加相同内容