jquery追加

jQuery 追加元素的方法

使用 jQuery 追加元素可以通过多种方式实现，主要包括 append()、prepend()、after()、before()、appendTo() 和 prependTo() 等方法。

append()

append() 方法在选定元素的内部末尾插入内容。

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

prepend()

prepend() 方法在选定元素的内部开头插入内容。

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

after()

after() 方法在选定元素的外部后面插入内容。

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

before()

before() 方法在选定元素的外部前面插入内容。

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

appendTo()

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

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

prependTo()

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

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

动态追加元素示例

以下是一个动态追加元素的完整示例：

$(document).ready(function() {
    $("#addButton").click(function() {
        var newItem = $("<li>新项目</li>");
        $("#list").append(newItem);
    });
});

注意事项

• 确保 DOM 完全加载后再执行 jQuery 操作，通常将代码放在 $(document).ready() 中。
• 追加的内容可以是 HTML 字符串、DOM 元素或 jQuery 对象。
• 使用链式调用可以简化代码，例如 $("#target").append("<div>内容</div>").addClass("new-class");