1. DOM內(nèi)部插入append()與appendTo()
2. DOM外部插入after()與before()
3. DOM內(nèi)部插入prepend()與prependTo()
4. DOM外部插入insertAfter()與insertBefore()

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

append()與appendTo()

append：這個操作與對指定的元素執(zhí)行原生的appendChild方法，將它們添加到文檔中的情況類似。

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

簡單的總結(jié)就是：

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

append()前面是被插入的對象，后面是要在對象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容，而后面是被插入的

示例代碼：

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 內(nèi)容在方法的后面，
            //參數(shù)是將要插入的內(nèi)容。
            $(".content").append('<div class="append">通過append方法添加的元素</div>')
        })

    </script>

    <script type="text/javascript">

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

    </script>

2. DOM外部插入after()與before()

after()與before()

• before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點
• 2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面
• 2個方法都支持多個參數(shù)傳遞after(div1,div2,....)

注意點：

• after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入
• before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插入

示例代碼

    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每個元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多參數(shù)</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每個元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多參數(shù)</p>')

    })
    </script>

3.DOM內(nèi)部插入prepend()與prependTo()

prepend()與prependTo()

通過示例代碼可以看到prepend與prependTo的使用及區(qū)別：

• .prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).
• .prepend()和.prependTo()實現(xiàn)同樣的功能，主要的不同是語法，插入的內(nèi)容和目標的位置不同
• 對于.prepend() 而言，選擇器表達式寫在方法的前面，作為待插入內(nèi)容的容器，將要被插入的內(nèi)容作為方法的參數(shù)
• 而.prependTo() 正好相反，將要被插入的內(nèi)容寫在方法的前面，可以是選擇器表達式或動態(tài)創(chuàng)建的標記，待插入內(nèi)容的容器作為參數(shù)。

這里總結(jié)下內(nèi)部操作四個方法的區(qū)別：

• append()向每個匹配的元素內(nèi)部追加內(nèi)容
• prepend()向每個匹配的元素內(nèi)部前置內(nèi)容
• appendTo()把所有匹配的元素追加到另一個指定元素的集合中
• prependTo()把所有匹配的元素前置到另一個指定的元素集合中

示例代碼：

    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div節(jié)點
        //然后通過prepend在內(nèi)部的首位置添加一個新的p節(jié)點
        $('.aaron1').prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div節(jié)點
        //然后通過prependTo內(nèi)部的首位置添加一個新的p節(jié)點
        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
    })
    </script>

4.DOM外部插入insertAfter()與insertBefore()

與內(nèi)部插入處理一樣，jQuery由于內(nèi)容目標的位置不同，然增加了2個新的方法insertAfter與insertBefore

insertAfter()與insertBefore()

• .before()和.insertBefore()實現(xiàn)同樣的功能。主要的區(qū)別是語法——內(nèi)容和目標的位置。 對于before()選擇表達式在函數(shù)前面，內(nèi)容作為參數(shù)，而.insertBefore()剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的前面
• .after()和.insertAfter() 實現(xiàn)同樣的功能。主要的不同是語法——特別是（插入）內(nèi)容和目標的位置。 對于after()選擇表達式在函數(shù)的前面，參數(shù)是將要插入的內(nèi)容。對于 .insertAfter(), 剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的后面
• before、after與insertBefore、insertAfter的除了目標與位置的不同外，后面的不支持多參數(shù)處理

注意事項：

• insertAfter將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入；
• insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入；

示例代碼：

    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每個匹配的元素
        //不支持多參數(shù)
        $('<p style="color:red">測試insertBefore方法增加</p>', '<p style="color:red">多參數(shù)</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每個匹配的元素
        //不支持多參數(shù)
        $('<p style="color:red">測試insertAfter方法增加</p>', '<p style="color:red">多參數(shù)</p>').insertAfter($(".test2"))
    })
    </script>