jquery追加元素

jQuery 追加元素的方法

在 jQuery 中，可以通过多种方式向 DOM 中追加元素。以下是几种常见的方法：

append()
将内容插入到选定元素的内部末尾。
示例代码：

$("#container").append("<p>新追加的段落</p>");

prepend()
将内容插入到选定元素的内部开头。
示例代码：

$("#container").prepend("<p>新追加的段落</p>");

after()
在选定元素之后插入内容（作为同级元素）。
示例代码：

$("#target").after("<div>新插入的 div</div>");

before()
在选定元素之前插入内容（作为同级元素）。
示例代码：

$("#target").before("<div>新插入的 div</div>");

appendTo()
将元素追加到指定目标元素的内部末尾。
示例代码：

$("<p>新段落</p>").appendTo("#container");

prependTo()
将元素追加到指定目标元素的内部开头。
示例代码：

$("<p>新段落</p>").prependTo("#container");

动态创建并追加元素

可以通过 jQuery 动态创建元素并追加到 DOM 中：

var newElement = $("<div>", {
    class: "new-class",
    text: "动态创建的 div"
});
$("#container").append(newElement);

注意事项

• 确保 DOM 完全加载后再执行操作，可以将代码放在 $(document).ready() 中。
• 多次追加元素时，注意性能优化，避免频繁操作 DOM。
• 使用链式调用可以简化代码，例如：

  $("#container").append("<p>段落1</p>").append("<p>段落2</p>");