DOM常用外部插入方法與區別
- 2019 年 10 月 6 日
- 筆記
1.DOM外部插入after()與before()
節點與節點之前有各種關係，除了父子，祖輩關係，還可以是兄弟關係。之前我們在處理節點插入的時候，接觸到了內部插入的幾個方法，這節我們開始講外部插入的處理，也就是兄弟之間的關係處理，這裡jQuery引入了2個方法，可以用來在匹配I的元素前後插入內容。
|
選擇器 |
描述 |
|---|---|
|
.after(content) |
在匹配選擇器的每個元素之後插入內容（作為兄弟節點） |
|
.before(content) |
方法在匹配選擇器的元素之前插入內容（作為兄弟節點） |
before與after都是用來對相對選中元素外部增加相鄰的兄弟節點 2個方法都是都可以接收HTML字元串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者後面 2個方法都支援多個參數傳遞after(div1,div2,....)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .aaron{ border: 1px solid red; } </style> </head> <body> <h2>通過before與after添加元素</h2> <button id="bt1">點擊通過jQuery的before添加元素</button> <button id="bt2">點擊通過jQuery的after添加元素</button> <div class="aaron"> <p class="test1">測試before</p> </div> <div class="aaron"> <p class="test2">測試after</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在匹配test1元素集合中的每個元素前面插入p元素 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多參數</p>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //在匹配test1元素集合中的每個元素後面插入p元素 $(".test2").after('<p style="color:blue">after,在匹配元素之後增加</p>', '<p style="color:blue">多參數</p>') }) </script> </body>
注意點：
- after向元素的後邊添加html程式碼，如果元素後面有元素了，那將後面的元素後移，然後將html程式碼插入
- before向元素的前邊添加html程式碼，如果元素前面有元素了，那將前面的元素前移，然後將html程式碼插
2.DOM外部插入insertAfter()與insertBefore()
與內部插入處理一樣，jQuery由於內容目標的位置不同，然增加了2個新的方法insertAfter與insertBefore
|
選擇器 |
描述 |
|---|---|
|
insertAfter() |
把元素插入到所有匹配的元素的後面 |
|
insertBefore() |
把元素插入到所有匹配的元素的後面 |
- .before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。 對於before()選擇表達式在函數前面，內容作為參數，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數里元素的前面
- .after()和.insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對於after()選擇表達式在函數的前面，參數是將要插入的內容。對於 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數里元素的後面
- before、after與insertBefore。insertAfter的除了目標與位置的不同外，後面的不支援多參數處理
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <h2>通過insertBefore與insertAfter添加元素</h2> <button id="bt1">點擊通過jQuery的insertBefore添加元素</button> <button id="bt2">點擊通過jQuery的insertAfter添加元素</button> <div class="aaron"> <p class="test1">測試insertBefore,不支援多參數</p> </div> <div class="aaron"> <p class="test2">測試insertAfter,不支援多參數</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在test1元素前後插入集合中每個匹配的元素 //不支援多參數 $('<p style="color:red">測試insertBefore方法增加</p>', '<p style="color:red">多參數</p>').insertBefore($(".test1")) }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //在test2元素前後插入集合中每個匹配的元素 //不支援多參數 $('<p style="color:red">測試insertAfter方法增加</p>', '<p style="color:red">多參數</p>').insertAfter($(".test2")) }) </script> </body> </html>
注意事項：
- insertAfter將JQuery封裝好的元素插入到指定元素的後面，如果元素後面有元素了，那將後面的元素後移，然後將JQuery對象插入；
- insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然後將JQuery對象插入；
