摘要：通過方法添加的元素剛好相反，內(nèi)容在方法前面，無論是一個選擇器表達(dá)式或創(chuàng)建作為標(biāo)記上的標(biāo)記它都將被插入到目標(biāo)容器的末尾。主要的不同是語法特別是插入內(nèi)容和目標(biāo)的位置。

首先，介紹如何使用JavaScript創(chuàng)建div節(jié)點(diǎn)元素，主要包括創(chuàng)建div節(jié)點(diǎn)元素的屬性和創(chuàng)建div節(jié)點(diǎn)元素的樣式兩大部分內(nèi)容

創(chuàng)建流程：

創(chuàng)建節(jié)點(diǎn)(常見的：元素、屬性和文本)

添加節(jié)點(diǎn)的一些屬性

加入到文檔中

涉及方法：

創(chuàng)建元素：document.createElement

設(shè)置屬性：setAttribute

添加文本：innerHTML

加入文檔：appendChild

注：

每一個元素節(jié)點(diǎn)都必須多帶帶創(chuàng)建

節(jié)點(diǎn)是屬性需要多帶帶設(shè)置，而且設(shè)置的接口不是很統(tǒng)一

添加到指定的元素位置不靈活

瀏覽器兼容問題處理

    
    
    



    
動態(tài)創(chuàng)建元素節(jié)點(diǎn)
    

        
點(diǎn)擊body區(qū)域會動態(tài)創(chuàng)建元素節(jié)點(diǎn)
    
    

常見的是直接把這個節(jié)點(diǎn)的結(jié)構(gòu)給通過HTML標(biāo)記字符串描述出來，通過$()函數(shù)處理，$("html結(jié)構(gòu)")

$("
")

與創(chuàng)建元素節(jié)點(diǎn)類似，可以直接把文本內(nèi)容一并描述

$("
我是文本節(jié)點(diǎn)
")

與創(chuàng)建元素節(jié)點(diǎn)同樣的方式

$("
我是文本節(jié)點(diǎn)
")

通過jQuery對上一節(jié)代碼進(jìn)行改造

$("
動態(tài)創(chuàng)建DIV元素節(jié)點(diǎn)
")

這就是jQuery創(chuàng)建節(jié)點(diǎn)的方式，讓我們保留HTML的結(jié)構(gòu)書寫方式，非常的簡單、方便和靈活

動態(tài)創(chuàng)建的元素只是臨時存放在內(nèi)存中，最終需要放到頁面文檔并呈現(xiàn)出來。這里就涉及到一個位置關(guān)系，常見的就是把這個新創(chuàng)建的元素，當(dāng)作頁面某一個元素的子元素放到其內(nèi)部。針對這樣的處理，jQuery就定義2個操作的方法

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

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

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

    
    
    
    



    
通過append與appendTo添加元素
    點(diǎn)擊通過jQuery的append添加元素
    點(diǎn)擊通過jQuery的appendTo添加元素

    


    

    

外部插入的處理，也就是兄弟之間的關(guān)系處理，這里jQuery引入了2個方法，可以用來在匹配的元素前后插入內(nèi)容

選擇器的描述

before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點(diǎn)

2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面

2個方法都支持多個參數(shù)傳遞after(div1,div2,....) 可以參考右邊案例代碼

注意點(diǎn)
after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入
before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插

    
    
    
    



    
通過before與after添加元素
    點(diǎn)擊通過jQuery的before添加元素
    點(diǎn)擊通過jQuery的after添加元素
    

        
測試before
    
    

        
測試after
    
    
    

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

選擇器的描述：

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

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

.prepend()和.prependTo()實(shí)現(xiàn)同樣的功能，主要的不同是語法，插入的內(nèi)容和目標(biāo)的位置不同

對于.prepend() 而言，選擇器表達(dá)式寫在方法的前面，作為待插入內(nèi)容的容器，將要被插入的內(nèi)容作為方法的參數(shù)

.prependTo() 正好相反，將要被插入的內(nèi)容寫在方法的前面，可以是選擇器表達(dá)式或動態(tài)創(chuàng)建的標(biāo)記，待插入內(nèi)容的容器作為參數(shù)。

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

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

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

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

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

    
    
    
    



    
通過prepend與prependTo添加元素
    點(diǎn)擊通過jQuery的prepend添加元素
    點(diǎn)擊通過jQuery的prependTo添加元素
    

        
測試prepend
    
    

        
測試prependTo
    
    
    

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

.before()和.insertBefore()實(shí)現(xiàn)同樣的功能。主要的區(qū)別是語法——內(nèi)容和目標(biāo)的位置。 對于before()選擇表達(dá)式在函數(shù)前面，內(nèi)容作為參數(shù)，而.insertBefore()剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的前面

.after()和.insertAfter() 實(shí)現(xiàn)同樣的功能。主要的不同是語法——特別是（插入）內(nèi)容和目標(biāo)的位置。 對于after()選擇表達(dá)式在函數(shù)的前面，參數(shù)是將要插入的內(nèi)容。對于 .insertAfter(), 剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的后面

before、after與insertBefore、insertAfter的除了目標(biāo)與位置的不同外，后面的不支持多參數(shù)處理

注意事項(xiàng)

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

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

    
    
    
    



    
通過insertBefore與insertAfter添加元素
    點(diǎn)擊通過jQuery的insertBefore添加元素
    點(diǎn)擊通過jQuery的insertAfter添加元素
    

        
測試insertBefore,不支持多參數(shù)
    
    

        
測試insertAfter,不支持多參數(shù)
    
    
    

jQuery提供了幾種不同的方法來處理移除頁面上節(jié)點(diǎn)的操作

empty方法：清空方法，但是與刪除有點(diǎn)不一樣，因?yàn)樗灰瞥付ㄔ刂械乃凶庸?jié)點(diǎn)

這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因?yàn)椋鶕?jù)說明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)

中國有嘻哈

如果我們通過empty方法移除里面div的所有元素，它只是清空內(nèi)部的html代碼，但是標(biāo)記仍然留在DOM中

//通過empty處理
$(".hello").empty()

//結(jié)果：
中國有嘻哈
被移除

remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。

例如一段節(jié)點(diǎn)，綁定點(diǎn)擊事件

中國有嘻哈
$(".hello").on("click",fn)

如果不通過remove方法刪除這個節(jié)點(diǎn)其實(shí)也很簡單，但是同時需要把事件給銷毀掉，這里是為了防止"內(nèi)存泄漏"，所以前端開發(fā)者一定要注意，綁了多少事件，不用的時候一定要記得銷毀

通過remove方法移除div及其內(nèi)部所有元素，remove內(nèi)部會自動操作事件銷毀方法，所以使用使用起來非常簡單

//通過remove處理
$(".hello").remove()
//結(jié)果：
中國有嘻哈
 全部被移除
//節(jié)點(diǎn)不存在的同時，事件也會被銷毀

remove表達(dá)式參數(shù)

remove比empty好用的地方就是可以傳遞一個選擇器表達(dá)式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)

可以通過$()選擇一組相同的元素，然后通過remove()傳遞篩選的規(guī)則從而進(jìn)行處理

要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法，兩個都是刪除元素，但是兩者還是有區(qū)別

empty方法

嚴(yán)格地講，empty()方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)，它能清空元素中的所有后代節(jié)點(diǎn)

empty不能刪除自己本身這個節(jié)點(diǎn)

remove方法

該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時被刪除

提供傳遞一個篩選的表達(dá)式，刪除指定合集中的元素

這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來

$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當(dāng)你append之后，又重新回到了文檔流中。就又顯示出來了

當(dāng)然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)

    
    
    



    
P元素1，默認(rèn)給綁定一個點(diǎn)擊事件
    
P元素2，默認(rèn)給綁定一個點(diǎn)擊事件
    點(diǎn)擊刪除 p 元素
    點(diǎn)擊移動 p 元素
    

通過一張對比表來解釋2個方法之間的不同

remove：移除節(jié)點(diǎn)

無參數(shù)，移除自身整個節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)

有參數(shù)，移除篩選出的節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)

detach：移除節(jié)點(diǎn)

移除的處理與remove一致

與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來

例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當(dāng)你append之后，又重新回到了文檔流中。就又顯示出來了。

    
    
    
    



    
給頁面2個p元素節(jié)點(diǎn)綁定點(diǎn)擊事件,點(diǎn)擊后彈出自己本身的節(jié)點(diǎn)內(nèi)容
    
元素p1，同時綁定點(diǎn)擊事件
    
元素p2，同時綁定點(diǎn)擊事件
    
通過點(diǎn)擊2個按鈕后觀察方法處理的區(qū)別
    點(diǎn)擊通過remove處理元素p1
    點(diǎn)擊通過detach處理元素p2