jquery append()和appendTo() 的区别

小解轻创说

已于 2023-03-28 18:25:10 修改

阅读量2.7k

点赞数 8

分类专栏： jquery 文章标签： jquery css3 前端 html5

于 2022-05-16 21:21:17 首次发布

本文链接：https://blog.csdn.net/m0_62360527/article/details/124806790

版权

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了jQuery中的append()和appendTo()方法，包括它们的使用方式、区别以及示例代码。append()方法是在选定元素的末尾添加内容，而appendTo()则是将内容添加到指定元素的末尾。文中还提到了如果添加的是已存在元素，原有的元素会被删除。此外，还展示了如何在append()中使用回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

append()和appendTo() 的区别

append()

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

在A的后面添加B

content，可以是HTML 元素，jQuery 对象，DOM 元素，

 <script>
        $(function () {
            $('ul').append(123456)
        })
    </script>
</head>

<body>
    <h1></h1>
    <p></p>
    <ul title="123">
        <li title="123">12</li>
        <li>354</li>
        <li>457</li>
        <li>5658</li>
    </ul>
</body>

   $(function () {
            $('ul').append('<h1>123456</h1>')
        })

后面的函数index 返回的是所选对象的索引，ele是所选对象的后代内容

 $(function () {
            $('ul').append(function (index, ele) {
                console.log(index + ele);
            })
        })
    </script>
</head>

<body>
    <h1></h1>
    <p></p>
    <ul>
        <li>123</li>
        <li>123</li>
    </ul>
    <ul title="123">
        <li title="123">12</li>
        <li>354</li>
        <li>457</li>
        <li>5658</li>
    </ul>
</body>

注意：append里的content和函数不能同时添加，不然后面的函数会当文本输出，引文content可以用逗号隔开的多个值，所以后面的函数会当文本输出

  <script>
        $(function () {
            let a = $('h1')
            $('ul').append('<h1>123</h1>', function (a, b) {
                console.log(a + b);
            })
        })
    </script>
</head>
 
<body>
    <ul title="123">
        <h1>123</h1>
        <li title="123">12</li>
        <li>354</li>
        <li>457</li>
        <li>5658</li>
    </ul>
</body>

appendTo()

$(content).appendTo(selector)

将A添加到B的后面

content插入的内容必须包含h5标签

<script>
        $(function () {
            $('<h1>123<h1>').appendTo($('ul'))
        })
    </script>
</head>

<body>

    <ul title="123">
        <li title="123">12</li>
        <li>354</li>
        <li>457</li>
        <li>5658
        </li>
    </ul>
</body>

如果你添加的是已经存在的元素那么会消除原本的元素只保留新添加的（append也是如此）

 <script>
        $(function () {
            let a = $('h1')
            a.appendTo($('ul'))
        })
    </script>
</head>

<body>
    <ul title="123">
        <h1>123</h1>
        <li title="123">12</li>
        <li>354</li>
        <li>457</li>
        <li>5658</li>
    </ul>
</body>