Manipulation-DOM Insertion, Inside

Posted on Edited on In Views: Disqus:

 

一、.append()

將content插入所選擇的元素裡的最未端。

請參考.append()與.appendTo()的差別

 

二、.appendTo()

將content插入所選擇的元素裡的最未端。

請參考.append()與.appendTo()的差別

 

三、.html()

請參考.html() .text() .val() 的差別與前端html編解碼

 

四、.prepend()

將content插入所選擇的元素裡的最前端。

<!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">
</head>
<body>
    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>

    <script>
        $(".inner").prepend("<p>prepend</p>");
    </script>
</body>
</html>

 

五、.prependTo()

將content插入所選擇的元素裡的最前端。

<!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">

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

    <script>
        $("<div class='mytest'>aaa</div>").prependTo($(".container"));
    </script>
</body>
</html>

其.prepend()與.prependTo()差別，請先參考.append()與.appendTo()的差別後，再延伸推倒即知。

 

六、.text()

請參考.html() .text() .val() 的差別與前端html編解碼