DOM節點的插入（jQuery）

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

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

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

append：這個操做與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的狀況相似。

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

簡單的總結就是：

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

append()前面是被插入的對象，後面是要在對象內插入的元素內容
appendTo()前面是要插入的元素內容，然後面是被插入的對象

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

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

選擇器的描述：

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

注意點：

• after向元素的後邊添加html代碼，若是元素後面有元素了，那將後面的元素後移，而後將html代碼插入
• before向元素的前邊添加html代碼，若是元素前面有元素了，那將前面的元素前移，而後將html代碼插

3DOM內部插入prepend()與prependTo()

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

選擇器的描述：

 

經過右邊代碼能夠看到prepend與prependTo的使用及區別：

• .prepend()方法將指定元素插入到匹配元素裏面做爲它的第一個子元素 (若是要做爲最後一個子元素插入用.append()).
• .prepend()和.prependTo()實現一樣的功能，主要的不一樣是語法，插入的內容和目標的位置不一樣
• 對於.prepend() 而言，選擇器表達式寫在方法的前面，做爲待插入內容的容器，將要被插入的內容做爲方法的參數
• 而.prependTo() 正好相反，將要被插入的內容寫在方法的前面，能夠是選擇器表達式或動態建立的標記，待插入內容的容器做爲參數。

這裏總結下內部操做四個方法的區別：

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

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

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

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

注意事項：

• insertAfter將JQuery封裝好的元素插入到指定元素的後面，若是元素後面有元素了，那將後面的元素後移，而後將JQuery對象插入；
• insertBefore將JQuery封裝好的元素插入到指定元素的前面，若是元素前面有元素了，那將前面的元素前移，而後將JQuery對象插入；