元素添加到DOM树上

元素添加到DOM树上
首先要创建一个元素 然后特在给元素添加内容 比如样式 属性 在添加到DOM树上
创建元素 document.createElement(“元素名”) 只存在内存中
创建 文本 document.createTextNode(“腊八节记得吃粥”);
设置内容和属性

		a.href = "http://www.bailiban.com"; 设置属性
		a.innerHTML = "百里半"; 设置内容

添加样式

		 h1.setAttribute('style','color:red;height:500px') 设置样式
		 h1.style.color = "#00f" 设置样式

添加到DOM树上

		document.body.appendChild(a); 这是添加到 body标签下的 
		document.getElementsByTagName（“div”）获取div的节点
		div.appendChild(a); //这是添加到div 下的

插入：在现有的子元素之前加入新元素insertBefore

		var div = document.getElementsByTagName("div")[0];//获取父节点
		var strong = document.getElementsByTagName("strong")[0]; //获取子元素节点
		var span = document.createElement("span");//创建元素
		span.innerHTML = "span"; //给元素添加值
		div.insertBefore(span, strong //将新元素添加到父级元素div里面 strong元素前面

替换：替换现有的子元素replaceChild

	var div = document.getElementsByTagName("div")[0];//获取父节点
		var strong = document.getElementsByTagName("strong")[0]; //获取子元素节点
		var span = document.createElement("span");//创建元素
		span.innerHTML = "span"; //给元素添加值
		div.replaceChild(span, strong //将div里的stong元素替换成span元素  

在现有的子元素之后 加入新元
封装函数insertAfter（）；功能类似insertBefore（）;
提示：可忽略老版本浏览器，直接在Element.prototype上编程,因为在原型链上编程this可以指代任何你想调用的对象。
思路：将一个数插入到另一个数后面，可以转换为将这个数插入到那个数后面的数的前面，如果插入的位置是最后一位则用appendChild判断一下

<div>
	<i></i>
	<b></b>
	<span></span>
</div>
	<script type="text/javascript">
	Element.prototype.insertAfter = function(targetNode,afterNode){
		var beforeNode = afterNode.nextElementSibling;
		if(beforeNode == null){
			this.appendChild(targetNode); //插入位置是最后一位用appendChild
		}else{
			this.insertBefore(targetNode,beforeNode); 
		}
	}
	var div = document.getElementsByTagName('div')[0];
	var b = document.getElementsByTagName('b')[0];
	var span = document.getElementsByTagName('span')[0];
	var p = document.createElement('p');
   </script>

删除元素/ 通过父元素删除removeChild(); 自己删除 remove();

	var div = document.getElementsByTagName("div")[0];
	var p = document.getElementsByTagName("p")[0];
	var strong = document.getElementsByTagName("strong")[0];
	// 通过父元素删除 需要获取父级元素节点 然后获取需要删除元素的节点
	div.removeChild(p);
	// 自杀 只用获取需要删除元素的节点
	strong.remove();