jquery追加

使用 jQuery 追加内容的方法

jQuery 提供了多种方法用于在 DOM 中追加内容，以下是几种常见的方式：

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

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

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

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

after()
在指定元素之后插入内容（同级）。

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

before()
在指定元素之前插入内容（同级）。

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

appendTo()
将内容追加到目标元素的内部末尾，语法与 append() 相反。

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

prependTo()
将内容追加到目标元素的内部开头，语法与 prepend() 相反。

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

动态追加 HTML 或文本

可以直接追加 HTML 字符串或文本内容：

$("#target").append("<div class='new-item'>动态添加的 HTML</div>");

追加现有元素

可以将现有的 DOM 元素移动到新的位置：

var existingElement = document.getElementById("existing");
$("#target").append(existingElement);

使用回调函数动态生成内容

可以通过回调函数动态生成追加的内容：

$("#target").append(function(index, currentHTML) {
    return "<p>动态生成的内容 " + (index + 1) + "</p>";
});

链式操作

jQuery 方法支持链式调用，可以连续追加多个内容：

$("#target")
    .append("<p>第一段</p>")
    .append("<p>第二段</p>");

注意事项

• 确保 DOM 加载完成后再执行 jQuery 操作，通常将代码放在 $(document).ready() 中。
• 避免频繁操作 DOM，可以先将内容拼接成字符串再一次性追加，以提高性能。
• 使用 text() 方法可以追加纯文本内容，避免 XSS 攻击。

$("#target").text("安全的纯文本内容");

以上方法适用于大多数动态内容追加场景，可根据需求选择合适的方式。