DMO節點內部插入的常用方法與區別

小周sri的碼農發表於2017-09-08

1.DOM內部插入append()與appendTo()

動態建立的元素是不夠的，它只是臨時存放在記憶體中，最終我們需要放到頁面文件並呈現出來。那麼問題來了，怎麼放到文件上？

這裡就涉及到一個位置關係，常見的就是把這個新建立的元素，當作頁面某一個元素的子元素放到其內部。針對這樣的處理，jQuery就定義2個操作的方法。

 

選擇器 描述
append()

向每個匹配的元素內部追加內容或追加子節點
appendTo()

把所有匹配的元素追加到另一個指定的元素集合中

 

append：這個操作與對指定的元素執行原生的appendChild方法，將它們新增到文件中的情況類似。

appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <h2>通過append與appendTo新增元素</h2>
    <button id="bt1">點選通過jQuery的append新增元素</button>
    <button id="bt2">點選通過jQuery的appendTo新增元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 內容在方法的後面，
            //引數是將要插入的內容。
            $(".content").append('<div class="append">通過append方法新增的元素</div>')
        })

    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {
            //.appendTo()剛好相反，內容在方法前面，
            //無論是一個選擇器表示式 或建立作為標記上的標記
            //它都將被插入到目標容器的末尾。
            $('<div class="appendTo">通過appendTo方法新增的元素</div>').appendTo($(".content"))
        })

    </script>

</body>

</html>

簡單的總結：

　　.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同

append()前面是被插入的物件，後面是要在物件內插入的元素內容
appendTo()前面是要插入的元素內容，而後面是被插入的物件

 

2.DOM內部插入prepend()與prependTo()

在元素內部進行操作的方法，除了在被選元素的結尾（仍然在內部）通過append與appendTo插入指定內容外，相應的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo.

選擇器 描述
prepend()

在被選元素的開頭插入內容
prependTo()

把所有匹配的元素前置到指定的元素集合中

 提示： 就是顛倒了的prepend()

 

prepend與prependTo的使用及區別：

.prepend()方法將指定元素插入到匹配元素裡面作為它的第一個子元素 (如果要作為最後一個子元素插入用.append()).

.prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同

對於.prepend() 而言，選擇器表示式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的引數

而.prependTo() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表示式或動態建立的標記，待插入內容的容器作為引數。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron2 p {
        color: blue;
    }
    </style>
</head>

<body>
    <h2>通過prepend與prependTo新增元素</h2>
    <button id="bt1">點選通過jQuery的prepend新增元素</button>
    <button id="bt2">點選通過jQuery的prependTo新增元素</button>
    <div class="aaron1">
        <p>測試prepend</p>
    </div>
    <div class="aaron2">
        <p>測試prependTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div節點
        //然後通過prepend在內部的首位置新增一個新的p節點
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div節點
        //然後通過prependTo內部的首位置新增一個新的p節點
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>

</html>

 

 這裡總結下內部操作四個方法的區別：


append()向每個匹配的元素內部追加內容

prepend()向每個匹配的元素內部前置內容

appendTo()把所有匹配的元素追加到另一個指定元素的集合中

prependTo()把所有匹配的元素前置到另一個指定的元素集合中

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相關文章