## 节点对象的方法 ### Node.appendChild() 接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。 ~~~javascript var addCountry = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>"; var culInnerHtml = document.getElementById("_asia").innerHTML; culInnerHtml = culInnerHtml + cli; document.getElementById("_asia").innerHTML = culInnerHtml; }; var addCountry2 = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = document.createElement("li"); cli.innerHTML = cvalue; document.getElementById("_asia").appendChild(cli); }; ~~~ ### Node.hasChildNodes() 返回一个布尔值，判断当前节点是否有子节点。 ~~~javascript var _asiaUl = document.getElementById("_asia"); if (_asiaUl.hasChildNodes()) { _asiaUl.innerHTML = ""; } ~~~ ### Node.insertBefore() 方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。 ~~~javascript var getIndexLi = function(index) { var _asiaChilds = document.getElementById("_asia").childNodes; var k = 1; for (var i = 0; i < _asiaChilds.length; i++) { var cnode = _asiaChilds[i]; if (cnode.nodeName === 'LI') { if (index === k) { return cnode; } k++; } } } var addCountry3 = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = document.createElement("li"); cli.innerHTML = cvalue; var _asiaEle = document.getElementById("_asia"); var cindex = document.getElementById("cindex").value; var cele = getIndexLi(parseInt(cindex)); _asiaEle.insertBefore(cli, cele); }; ~~~ ### Node.removeChild() 方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。 ~~~javascript var removeCountry1 = function(id) { var _asiaEle = document.getElementById("_asia"); _asiaEle.removeChild(document.getElementById(id)); } ~~~ ### Node.replaceChild() 方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。 ~~~javascript var repalceCountry = function() { var newEle = document.createElement("LI"); newEle.innerHTML = "Tailand"; var _asiaEle = document.getElementById("_asia"); _asiaEle.replaceChild(newEle, document.getElementById("_japan")); } ~~~