jQuery append()方法 - BBSMAP

jQuery append()方法

Post published:2023年5月12日
Post category:jquery

当需要在HTML文档中添加新元素时，可以使用jQuery的append()方法。该方法将指定的内容作为子元素插入到指定的元素内的末尾位置。

语法

$(selector).append(content,function(index,html));

selector：必需，用于指定执行操作的元素。
content：必需，需要添加到元素中的内容，可以是HTML元素/文本/HTML对象等。
function(index, html)：可选，用于返回一个HTML字符串，用来插入到指定的元素内的末尾位置。

示例1：添加文字到HTML文档

<html>
<head>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="myDiv">This is my div element.</div>
    <script>
        $(document).ready(function(){
            $("#myDiv").append("I just added some new text!");
        });
    </script>
</body>
</html>

运行结果：该段文字被添加到了id为“myDiv”的元素中。

示例2：添加HTML元素到HTML文档

<html>
<head>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="myDiv">This is my div element.</div>
    <button id="myButton">Add New Element</button>
    <script>
        $(document).ready(function(){
            $("#myButton").click(function(){
                $("#myDiv").append("<p style='color:blue;'>A new HTML element!</p>");
            });
        });
    </script>
</body>
</html>

运行结果：单击button按钮后，将一个蓝色的p标签被添加到id为“myDiv”的元素中。

注意：如果在括号内传递第二个参数，该参数将用于返回新元素的HTML字符串，而不是直接将新元素添加到元素中。因此，添加的内容可以是动态生成的元素。

Tags: jquery