本文主要總結(jié)了jQuery中DOM節(jié)點(diǎn)的插入方法，以及各種方法的注意點(diǎn)，下面話不多說(shuō)，來(lái)看看詳細(xì)的介紹吧。

一、內(nèi)部插入append()與appendTo()

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

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

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

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

二、內(nèi)部插入prepend()與prependTo()

在元素內(nèi)部進(jìn)行操作的方法，除了在被選元素的結(jié)尾（仍然在內(nèi)部）通過(guò)append與appendTo插入指定內(nèi)容外，相應(yīng)的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo

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

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

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

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

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

節(jié)點(diǎn)與節(jié)點(diǎn)之前有各種關(guān)系，除了父子，祖輩關(guān)系，還可以是兄弟關(guān)系。之前我們?cè)谔幚砉?jié)點(diǎn)插入的時(shí)候，接觸到了內(nèi)部插入的幾個(gè)方法，這節(jié)我們開(kāi)始講外部插入的處理，也就是兄弟之間的關(guān)系處理，這里jQuery引入了2個(gè)方法，可以用來(lái)在匹配I的元素前后插入內(nèi)容。

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

注意點(diǎn)：

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

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

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

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

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

注意事項(xiàng)：

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

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

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

最新評(píng)論