DOM節點的插入

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

這裡就涉及到乙個位置關係，常見的就是把這個新建立的元素，當作頁面某乙個元素的子元素放到其內部。針對這樣的處理，jquery就定義2個操作的方法：

簡單的總結就是：

2．dom外部插入after()與before()

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

選擇器的描述：

（1）before與after都是用來對相對選中元素外部增加相鄰的兄弟節點；

（2）2個方法都是都可以接收html字串，dom 元素，元素陣列，或者jquery物件，用來插入到集合中每個匹配元素的前面或者後面；

（3）2個方法都支援多個引數傳遞after(div1,div2,....)。

注意點：

（1）after向元素的後邊新增html**，如果元素後面有元素了，那將後面的元素後移，然後將html**插入。

（2）before向元素的前邊新增html**，如果元素前面有元素了，那將前面的元素前移，然後將html**插入。

3. dom內部插入prepend()與prependto()

選擇器的描述：

prepend與prependto的使用及區別：

（2）.prepend()和.prependto()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同；

（3）對於.prepend() 而言，選擇器表示式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的引數；

（4）而.prependto() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表示式或動態建立的標記，待插入內容的容器作為引數。

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

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

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

4. dom外部插入insertafter()與insertbefore()

與內部插入處理一樣，jquery由於內容目標的位置不同，增加了2個新的方法insertafter與insertbefore

（1）.before()和.insertbefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。對於.before()選擇表示式在函式前面，內容作為引數，而.insertbefore()剛好相反，內容在方法前面，它將被放在引數裡元素的前面。

（2）.after()和.insertafter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。對於.after()選擇表示式在函式的前面，引數是將要插入的內容。對於 .insertafter(), 剛好相反，內容在方法前面，它將被放在引數裡元素的後面。

（3）before、after與insertbefore。insertafter的除了目標與位置的不同外，後面的不支援多引數處理。

注意事項：

（1）insertafter將jquery封裝好的元素插入到指定元素的後面，如果元素後面有元素了，那將後面的元素後移，然後將jquery物件插入；

（2）insertbefore將jquery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然後將jquery物件插入。