append與 appendTo的區別

lily000000發表於2017-11-02

1、append(content|fn)
向每個匹配的元素內部追加內容。
這個操作與對指定的元素執行appendChild方法,將它們新增到文件中的情況類似。
比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $('li').append('<p name="p2">p2</p>')
</script>
</html>複製程式碼

結果是這個樣子的

這裡寫圖片描述
這裡寫圖片描述

2、appendTo(content)
把所有匹配的元素追加到另一個指定的元素元素集合中。
實際上,使用這個方法是顛倒了常規的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $('<p>哈哈</p>').appendTo('li')
</script>
</html>複製程式碼

結果是這個樣子的

這裡寫圖片描述
這裡寫圖片描述

append與appendTo的區別:
①append()前面是要選擇的物件,後面是要在物件內插入的元素內容 即$(A).append(B), 把B追加到A中appendTo()前面
②appendTo()後面是要選擇的物件,前面是要在物件內插入的元素內容即$(A).appendTo(B),把A追加到B中

相關文章