DMO節點內部插入的常用方法與區別
- 2019 年 10 月 6 日
- 筆記
1.DOM內部插入append()與appendTo()
動態創建的元素是不夠的，它只是臨時存放在內存中，最終我們需要放到頁面文檔並呈現出來。那麼問題來了，怎麼放到文檔上？
這裡就涉及到一個位置關係，常見的就是把這個新創建的元素，當作頁面某一個元素的子元素放到其內部。針對這樣的處理，jQuery就定義2個操作的方法。
|
選擇器 |
描述 |
|---|---|
|
append() |
向每個匹配的元素內部追加內容或追加子節點 |
|
appendTo() |
把所有匹配的元素追加到另一個指定的元素集合中 |
append：這個操作與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的情況類似。
appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
<!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> .content { width: 300px; } .append{ background-color: blue; } .appendTo{ background-color: red; } </style> </head> <body> <h2>通過append與appendTo添加元素</h2> <button id="bt1">點擊通過jQuery的append添加元素</button> <button id="bt2">點擊通過jQuery的appendTo添加元素</button> <div class="content"></div> <script type="text/javascript"> $("#bt1").on('click', function() { //.append(), 內容在方法的後面， //參數是將要插入的內容。 $(".content").append('<div class="append">通過append方法添加的元素</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()剛好相反，內容在方法前面， //無論是一個選擇器表達式 或創建作為標記上的標記 //它都將被插入到目標容器的末尾。 $('<div class="appendTo">通過appendTo方法添加的元素</div>').appendTo($(".content")) }) </script> </body> </html>
簡單的總結：
.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同
append()前面是被插入的對象，後面是要在對象內插入的元素內容 appendTo()前面是要插入的元素內容，而後面是被插入的對象
2.DOM內部插入prepend()與prependTo()
在元素內部進行操作的方法，除了在被選元素的結尾（仍然在內部）通過append與appendTo插入指定內容外，相應的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo.
|
選擇器 |
描述 |
|---|---|
|
prepend() |
在被選元素的開頭插入內容 |
|
prependTo() |
把所有匹配的元素前置到指定的元素集合中 提示： 就是顛倒了的prepend() |
prepend與prependTo的使用及區別：
.prepend()方法將指定元素插入到匹配元素裏面作為它的第一個子元素 (如果要作為最後一個子元素插入用.append()). .prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同 對於.prepend() 而言，選擇器表達式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的參數 而.prependTo() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表達式或動態創建的標記，待插入內容的容器作為參數。
<!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> .aaron1{ border: 1px solid red; } .aaron1 p { color: red; } .aaron2{ border: 1px solid blue; } .aaron2 p { color: blue; } </style> </head> <body> <h2>通過prepend與prependTo添加元素</h2> <button id="bt1">點擊通過jQuery的prepend添加元素</button> <button id="bt2">點擊通過jQuery的prependTo添加元素</button> <div class="aaron1"> <p>測試prepend</p> </div> <div class="aaron2"> <p>測試prependTo</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //找到class="aaron1"的div節點 //然後通過prepend在內部的首位置添加一個新的p節點 $('.aaron1') .prepend('<p>prepend增加的p元素</p>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //找到class="aaron2"的div節點 //然後通過prependTo內部的首位置添加一個新的p節點 $('<p>prependTo增加的p元素</p>') .prependTo($('.aaron2')) }) </script> </body> </html>
這裡總結下內部操作四個方法的區別：
append()向每個匹配的元素內部追加內容 prepend()向每個匹配的元素內部前置內容 appendTo()把所有匹配的元素追加到另一個指定元素的集合中 prependTo()把所有匹配的元素前置到另一個指定的元素集合中
