一提到appendChild ,我們就知道是在父節點上增加子節點。
經常使用到它就是動態增加一個元素，將其加入到指定的父節點下。
其實appendChild除了這個功能之外，他還有一個功能:如果子節點不是動態創建的元素，而是在某個元素下的子元素，那么他還會自動執行一次removeChild功能。
舉個栗子：將ul1下的li移動到ul2下：
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>appendChild自帶removeChild功能</title> <style type="text/css"> #ul1{ background: red; } #ul2{ background: greenyellow; } </style> </head> <body> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button id="btn1">移動</button> <ul id="ul2"></ul> </body> </html>
正常思路下的javascript:
<script type="text/javascript">
var ul1 = document.getElementById("ul1"); var ul2 = document.getElementById("ul2"); var btn1 = document.getElementById("btn1"); btn1.onclick = function(){ //獲取ul1下所有li
olis = ul1.getElementsByTagName("li"); if(olis.length>0){ //獲取ul1下的第一個li
var oLi = ul1.children[0]; //刪除ul1下面的第一個li
ul1.removeChild(oLi); //給ul2下面增加ul1下的第一個Li
ul2.appendChild(oLi); } } </script>
去掉removeChild下的javascript:
<script type="text/javascript">
var ul1 = document.getElementById("ul1"); var ul2 = document.getElementById("ul2"); var btn1 = document.getElementById("btn1"); btn1.onclick = function(){ //獲取ul1下所有li
olis = ul1.getElementsByTagName("li"); if(olis.length>0){ //獲取ul1下的第一個li
var oLi = ul1.children[0]; //刪除ul1下面的第一個li
//ul1.removeChild(oLi);
//給ul2下面增加ul1下的第一個Li
ul2.appendChild(oLi); } } </script>
其實有沒有removeChild ul1下的li效果都是一樣的，因為appendChild()會先remove子元素之前位置父元素下的該元素，然后再新的父元素上添加該子元素。