jquery append()和appendTo() 的区别

2022-11-28 15:36:49 浏览数 (1)

append()和appendTo() 的区别

append()

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

在A的后面添加B

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

代码语言：javascript复制
 <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>
代码语言：javascript复制
   $(function () {
            $('ul').append('<h1>123456</h1>')
        })

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

代码语言：javascript复制
 $(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可以用逗号隔开的多个值，所以后面的函数会当文本输出

代码语言：javascript复制
  <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标签

代码语言：javascript复制
<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也是如此）

代码语言：javascript复制
 <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>

总结

 append()和appendTo()最大的区别就是

append是a后面添加b（after，before也是如此）

appendto是将a添加到b后面（insertafter,insertbefore）

这是书写方式的不同

在语法功能上 append就是强化版的appendTo

注：如果添加已有的元素 会将原元素删除

jquery html

0 人点赞