.append()與.appendTo()的差別

Posted on Edited on In Views: Disqus:

 

一、.append()

其目地為將content插入所選擇的元素裡的最未端。

有兩種多載方法

.append( content [, content ] ) content Type: htmlString or Element or Text or Array or jQuery

.append( Function function )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .mytest {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>
    <button>append</button>
    <script>
        $("button").click(function () {
            $(".inner").append("<div class='mytest'>Test</div>","<div class='mytest'>Test2</div>");
        });
    </script>
</body>
</html>

其.append()的意思為將內容為"<div class='mytest'>Test<div>"字串，

插入class名稱為inner元素的子層，而已是排在所有子層元素的最後一位。

<h2>Greetings</h2>
<div class="container">
    <div class="inner">
        Hello
        <div class="mytest">Test</div>
        <div class="mytest">Test2</div>
    </div>
    <div class="inner">
        Goodbye
        <div class="mytest">Test</div>
        <div class="mytest">Test2</div>
    </div>
</div>

 

來看另一個例子比較特別，

其目地為將原DOM裡的所選到的jQuery object剪下，然後插入所選擇的元素裡的最未端。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        h2 {
            background-color: red;
        }
    </style>
</head>
<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">
            Hello
            <p>Test</p>
        </div>
        <div class="inner">
            Goodbye
            <p>Test</p>
        </div>
    </div>
    <script>
        $(".container").append($("h2"));
    </script>
</body>
</html>

所以該內容將會變成

<div class="container">
    <div class="inner">
        Hello
        <p>Test</p>
    </div>
    <div class="inner">
        Goodbye
        <p>Test</p>
    </div>
    <h2>Greetings</h2>
</div>

 

二、.appendTo( target ) target Type: Selector or htmlString or Array or jQuery

其目地跟.append()方法一樣，只是語法對調而已。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .mytest {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>
    <button>append</button>
    <script>
        $("button").click(function () {
            $("<div class='mytest'>Test</div>").appendTo(".inner");
        });
    </script>
</body>
</html>

其.appendTo()的意思為將內容為"<div class='mytest'>Test<div>"字串，

插入class名稱為inner元素的子層，而已是排在所有子層元素的最後一位。

 

當執行 appendTo()  方法後，會回傳最後所插入 DOM 的 jQuery object，

所以事後有需要也可以去操作他。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .mytest {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>
    <button>append</button>
    <script>
        var t;
        $("button").click(function () {
            t = $("<div class='mytest'>Test</div>");
            t.appendTo(".inner");
        });        
    </script>
</body>

</html>

執行結果

 

來看另一個例子比較特別，

其目地為將原DOM裡的所選到的jQuery object剪下，然後插入所選擇的元素裡的最未端。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .mytest {
            color: red;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>
    <button>append</button>
    <script>
        $("h2").appendTo($(".container"));
    </script>
</body>
</html>

所以該內容將會變成

<div class="container">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
    <h2>Greetings</h2>
</div>

 

可看的出來兩者差別為

$(selector).append(content);

$(content).appendTo(selector);

但結果相同

參考資料：

.append()

.appendTo()