jquery append()和appendTo() 的区别
jquery append()和appendTo() 的区别
坚毅的小解同志的前端社区
发布于 2022-11-28 15:36:49
发布于 2022-11-28 15:36:49
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>
总结
append()和appendTo()最大的区别就是
append是a后面添加b（after，before也是如此）
appendto是将a添加到b后面（insertafter,insertbefore）
这是书写方式的不同
在语法功能上 append就是强化版的appendTo
注：如果添加已有的元素 会将原元素删除
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-05-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录