一提到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子元素之前位置父元素下的该元素，然后再新的父元素上添加该子元素。