JS的DOM解析2--节点操作(创建和添加及删除节点)

一.创建节点的方法：

<script type="text/javascript">
	//1.createElement 创建节点
	var div=document.createElement('div');
	div.innerHTML="hello"; 
	//2.获得添加到的标签
	var body=document.getElementsByTagName('body')[0];
	//3.添加
	body.appendChild(div);
</script>

小结：
创建节点标签的方法：
1.creatElement 创建节点
2.获得添加到的标签
3.添加

二.添加和删除节点的方法：
body简化部分：

<div id="wrap">
		<div id="first">1</div>
		<div id="second">2</div>
	</div>

JS部分：

<script type="text/javascript">
	var third=document.createElement("p");
	third.innerHTML='你好';
	third.style.color="red";
	var wrap=document.getElementById('wrap');
	var first=document.getElementById('first');
	//appendChild()是将标签添加到父标签的最后一个节点
	wrap.appendChild(third);
	//insertBefore() 插入到指定标签的前一个位置
	 // wrap.insertBefore(third,second);
	 // //replaceChild 替换指定标签
	 // wrap.replaceChild(third,first);
	 //removeChild 删除标签
	 wrap.removeChild(first);
</script>

小结：
1.添加节点(标签)的函数：
appendChild(父标签) 是将标签添加到父标签的最后一个子节点
insertBefore(新标签，指定标签) 插入到指定标签的前一个位置
replaceChild(新标签，旧标签) 替换指定标签
2.删除节点()的函数：
removeChild(要删除的标签)