博客

jQuery appendTo()方法

  • Post category:jquery

当使用 jQuery 的 appendTo() 方法时，通过选择器定位到元素，并将其添加到另一个元素的末尾。这个方法本质上是将一个元素添加到另一个元素的内部。

语法

$(selector).appendTo(target);
  • selector: jQuery 选择器，用于选中需要添加到目标元素内部的元素。
  • target: 目标元素，需要将 selector 中选中的元素添加到它的内部。

示例1

在这个示例中，我们在文档的 body 元素中创建一个 div，并将其添加到 container 的末尾。

<!DOCTYPE html>
<html>
<head>
    <title>appendTo示例1</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("<div>动态创建的div元素</div>").appendTo("#container");
        });
    </script>
</head>
<body>
    <div id="container">
        <p>这是一个HTML段落。</p>
    </div>
</body>
</html>

在上面的示例中，我们使用 appendTo() 方法添加一个新的 div 元素到 #container 元素的末尾。

示例2

在这个示例中，我们创建一个空的 div 元素，并通过 appendTo() 方法将其添加到文档的 body 元素内。

<!DOCTYPE html>
<html>
<head>
    <title>appendTo示例2</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("<div></div>")
                .appendTo("#container")
                .html("<h2>动态创建的标题</h2><p>该段落展示了在创建 div 元素之后，使用链式语法设置其内部的 HTML 内容</p>");
        });
    </script>
</head>
<body>
    <div id="container">
        <p>这里是原始内容。</p>
    </div>
</body>
</html>

在上面的示例中，我们首先使用 $("<div></div>") 创建一个空的 div 元素，然后通过 appendTo() 方法将其添加到 #container 元素内。接下来，我们使用链式语法，通过调用 .html() 方法向新创建的 div 元素添加 HTML 内容。

总体而言，在使用 appendTo() 方法时，需要先创建一个要添加的元素（可以为空），然后使用 appendTo() 方法将其添加到指定的元素内部。

Tags: