jquery中append()和appendTo()的区别

最新推荐文章于 2024-09-04 21:43:51 发布

rocling

最新推荐文章于 2024-09-04 21:43:51 发布

阅读量3.6w

点赞数 7

分类专栏： javascript jquery 文章标签： append

本文链接：https://blog.csdn.net/rocling/article/details/82352530

版权

javascript 同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

append(content)用法：

功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>
    <style></style>

    <!--不需要再次引用jquery-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#appendH3").append("<p>追加的内容</p>")
        })
    </script>
</head>
<body>

    <h3 id="appendH3">append()追加内容</h3>

</body>
</html>

结果：

appendTo()用法：

使用格式是：
$(content).appendTo(selector);
参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>
    <style></style>

    <!--不需要再次引用jquery-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#beP").appendTo("#myDiv");
        })
    </script>

</head>
<body>
<div id="myDiv" style=" height: 100px;border: 2px solid blue    ;margin: 2px auto;width: 200px;">
        <h3 id="appendH3">append()追加内容</h3>
</div>

<p id="beP">被追加的内容</p>

</body>
</html>

结果：