节点的动态操作增删减

<script type="text/javascript">
	
//节点动态操作（增，删，改）
	var ul =  document.getElementsByTagName("ul")[0];
	var add =  document.getElementById("add");
	//创建节点
		//创建元素节点
			//document.createElement("li");//不是DOM中的方法
		//创建文本节点
	//添加节点
		//父节点.appendChild(新节点);//将新节点作为子节点添加到父节点的最后
		//父节点.insertBefor(新节点,目标节点);//将新节点添加到目标节点的前面，目标节点必须 是父节点的子节点
	//替换节点
		//父节点.replaceChild(新节点,目标节点);
	//删除节点：
		//父节点.removeChild(目标节点);
		//节点.remove();ie不支持
	//克隆节点：
		//节点.cloneNode();
		//节点.cloneNode(true);
	
	add.onclick = function(){
		//创建一个li元素节点
		//var li = document.createElement("li");
		//console.log(typeof li);//object
		//li.innerHTML = "新来的li";
		//动态创建文本节点
		//var text = document.createTextNode("新创建的文本节点");
		//console.log(typeof text);//object
		//li.innerHTML = text;//不能这样添加
		//li.appendChild(text);
		//在ul的最后添加li
		//ul.appendChild(li);
		//将新节点li添加到第二个li的前面
		//ul.insertBefore(li,ul.children[1]);
		//将新节点li添加到第二个li的后面
		//js没有提供一个添加后面的方法，需要自己封装
		//insertAfter(li,ul.children[1]);
		
		//将新节点替换第二个li节点
		//ul.replaceChild(li,ul.children[1]);
		//将第二个li节点删除
		//ul.removeChild(ul.children[1]);
		//ul.children[1].remove();
		
		//克隆ul的第二个li节点，将克隆出来 的节点添加到ol的最后
		
		//var li = ul.children[1].cloneNode(true);
		var li = ul.children[1];
		//console.log(li);
		
		ul.nextElementSibling.appendChild(li);
		
		
	}
	//insertAfter(新节点,目标节点);
	
	function insertAfter(newNode,target){
		//获取目标节点的父节点
		var parent = target.parentNode;
		if(parent.lastElementChild === target){
			//如果目标节点是最后一个子节点
			//直接将新节点添加父节点的最后
			parent.appendChild(newNode);
		}else{
			//如果目标节点不是最后一个子节点
			//说明肯定下一个兄弟节点
			//将新节点添加到下一个兄弟节点前面。
			parent.insertBefore(newNode,target.nextElementSibling);
		}
	};
</script>
</body>