jQuery學習之DOM節點的插入方法總結

本文主要總結了jQuery中DOM節點的插入方法，以及各種方法的注意點，下面話不多說，來看看詳細的介紹吧。

一、內部插入append()與appendTo()

• append：這個操作與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的情況類似。
• appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

append()和appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同，append()前面是要選擇的對象，后面是要在對象內插入的元素內容，appendTo()前面是要插入的元素內容，而后面是要選擇的對象。

 　　$("#bt1").on('click', function() {
 //.append(), 選擇表達式在函數的前面，
 //參數是將要插入的內容。
 $(".content").append('<div class="append">通過append方法添加的元素</div>')
 })

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

二、內部插入prepend()與prependTo()

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

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

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

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

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

三、外部插入after()與before()

節點與節點之前有各種關系，除了父子，祖輩關系，還可以是兄弟關系。之前我們在處理節點插入的時候，接觸到了內部插入的幾個方法，這節我們開始講外部插入的處理，也就是兄弟之間的關系處理，這里jQuery引入了2個方法，可以用來在匹配I的元素前后插入內容。

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

注意點：

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

$("#bt1").on('click', function() {
 //在匹配test1元素集合中的每個元素前面插入p元素
 $(".test1").before('<p >before,在匹配元素之前增加</p>', '<p >多參數</p>')
 })
$("#bt2").on('click', function() {
 //在匹配test1元素集合中的每個元素后面插入p元素
 $(".test2").after('<p >after,在匹配元素之后增加</p>', '<p >多參數</p>')
})

四、外部插入insertAfter()與insertBefore()

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

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

注意事項：

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

$("#bt1").on('click', function() {
 //在test1元素前后插入集合中每個匹配的元素,不支持多參數
 $('<p >測試insertBefore方法增加</p>', '<p >多參數</p>').insertBefore($(".test1"))
})

$("#bt2").on('click', function() {
 //在test2元素前后插入集合中每個匹配的元素,不支持多參數
 $('<p >測試insertAfter方法增加</p>', '<p >多參數</p>').insertAfter($(".test2"))
})

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。