jQuery教程 jQuery安装 jQuery语法 jQuery选择器 jQuery事件 jQuery隐藏与显示 jQuery淡入淡出 jQuery show()方法 jQuery hide()方法 jQuery toggle()方法 jQuery fadeIn()方法 jQuery fadeOut()方法 jQuery fadeToggle()方法 jQuery slideUp()方法 jQuery slideDown()方法 jQuery slideToggle()方法 jQuery animate()方法 jQuery stop()方法 jQuery callback jQuery链式调用 jQuery html()方法 jQuery text()方法 jQuery va l()方法 jQuery append()方法 jQuery prepend()方法 jQuery after()方法 jQuery before()方法 jQuery remove()方法 jQuery empty()方法 jQuery addClass()方法 jQuery removeClass()方法 jQuery css方法 jQuery toggleClass方法

jQuery append()方法

栏目： jquery 发布时间：2024-12-24

append() 方法是 jQuery 库中用于向被选元素的内部末尾插入内容的强大工具。无论是添加新的 HTML 元素、文本还是 jQuery 对象，append() 方法都能轻松完成。这使得它在动态构建页面内容、更新列表和插入用户生成的内容时特别有用。

一、基本用法

引入 jQuery 库：在使用 append() 方法之前，确保你的 HTML 文件中已经引入了 jQuery 库。这通常通过 CDN 链接或本地文件完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery append() 方法教程</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 你的 HTML 内容 -->
    <script>
        // 你的 jQuery 代码
    </script>
</body>
</html>

向元素内部末尾插入内容：使用 .append() 方法可以向被选元素的内部末尾插入指定的内容。内容可以是 HTML 字符串、jQuery 对象或 DOM 元素。

<div id="myDiv">
    这是一个div元素。
</div>
<button id="appendButton">追加内容</button>

<script>
    $(document).ready(function() {
        $("#appendButton").click(function() {
            $("#myDiv").append("<p>这是追加的新段落。</p>");
        });
    });
</script>

点击按钮后，<div id="myDiv"> 的内部末尾将插入一个新的 <p> 元素。

二、高级用法

追加多个元素：你可以一次性追加多个元素，只需将它们作为 HTML 字符串或 jQuery 对象传递给 .append() 方法。

<ul id="myList">
    <li>项目 1</li>
</ul>
<button id="addItemsButton">添加项目</button>

<script>
    $(document).ready(function() {
        $("#addItemsButton").click(function() {
            var newItems = "<li>项目 2</li><li>项目 3</li>";
            $("#myList").append(newItems);
        });
    });
</script>

追加 jQuery 对象：你还可以将 jQuery 对象作为参数传递给 .append() 方法，以追加复杂的 HTML 结构。

<div id="container">
    <div class="box">原始盒子</div>
</div>
<button id="addBoxButton">添加盒子</button>

<script>
    $(document).ready(function() {
        var $newBox = $("<div>").addClass("box").text("新添加的盒子");
        $("#addBoxButton").click(function() {
            $("#container").append($newBox.clone()); // 使用 clone() 以避免移动原始元素
        });
    });
</script>

注意，这里使用了 .clone() 方法来克隆 $newBox 对象，因为如果不克隆，原始元素将从其原始位置移动到新位置，而不是创建其副本。

追加函数返回的内容： .append() 方法还可以接受一个函数作为参数，该函数会针对每个匹配元素执行，并返回要插入的内容。

<ul id="dynamicList">
    <li>项目 1</li>
    <li>项目 2</li>
</ul>
<button id="addDynamicItemButton">添加动态项目</button>

<script>
    $(document).ready(function() {
        var itemCount = 3;
        $("#addDynamicItemButton").click(function() {
            $("#dynamicList").append(function() {
                return "<li>项目 " + (++itemCount) + "</li>";
            });
        });
    });
</script>

每次点击按钮时，都会根据当前的 itemCount 值动态生成一个新的列表项，并将其追加到 <ul id="dynamicList"> 中。

三、注意事项

.append() 方法将内容插入到被选元素的内部末尾。如果你需要将内容插入到开头，请使用 .prepend() 方法。
当你追加的内容包含事件处理程序或数据时，请确保正确地管理这些资源，以避免内存泄漏或不必要的性能开销。
在处理大量 DOM 操作时，考虑使用文档片段（DocumentFragment）来减少页面的重绘和重排次数，从而提高性能。

四、总结

append() 方法是 jQuery 中用于向元素内部末尾插入内容的强大工具。无论是简单的文本、HTML 元素还是复杂的 jQuery 对象，它都能轻松处理。通过掌握 append() 方法的基本和高级用法，你可以更灵活地构建和更新网页内容，提升用户体验和页面性能。

本文地址：https://www.tides.cn/p_jquery-append

jQuery append()方法

一、基本用法

二、高级用法

三、注意事项

四、总结

推荐阅读