关于js中插入删除节点的总结

1.在html中新增加一个节点或者是改变某个节点的内容

一种是使用innerHTML（标准）,用法链接:http://www.w3school.com.cn/jsref/prop_html_innerhtml.asp

注意：innerHTML与innerText的区别：前者的html标签会被浏览器识别，后者则是当做text的，标签不会被识别。

例子：（任务17代码片段）

function renderAqiList() {
	var itemHTML= "城市空气质量操作";
	
	for(var item in aqiData){
		itemHTML+="" + item + "" + aqiData[item] + " \
		删除 ";
	}
	aqitable.innerHTML=itemHTML;
}

注释：这里是在table里面增加了标签内容,渲染表格。

另外一种是使用创建节点的办法。用法链接：http://www.runoob.com/jsref/met-document-createelement.html

createElement->createTextNode->appendChild(->appendChild)或者createElement->innerText(->appendChild)

例子：

var btn=document.createElement("BUTTON");
 
  var t=document.createTextNode("CLICK ME");btn.appendChild(t); 
   
  
 
 
  
 
  或者 
   
  
 
 
  
 
 
  
var btn=document.createElement("BUTTON");
btn.innerText="click me";
 
  之后再把这个btn节点appendChild到需要的父节点里。 
  
 ps：还有一种创建虚拟节点（创建文档碎片节点）的方法createDocumentFragment()
 
  
 这是考虑到当要添加大量的节点的时候，如果直接添加新节点，速度会比较慢。所以可以先创建文档碎片，把数据一起写入它，然后appenChild到原始html里面。
 
  
 用法与之前类似
 
  
 例：（任务18代码片段）
 
  
    
 
  
var fragment = document.createDocumentFragment();
    numQueue.innerHTML="";
    for (var i=0;i
 
   
  
 
 
  
 
  
 
 
  
 
 
  2.关于查找节点 
   
  
 其实我每次解决类似的问题时，总会忘记怎么写，来来好好记一下。
 
  
 
 
  
 
   
关于DOM元素：parentNode，firstChild，lastChild，childNodes，insertBefore()，removeChild()，replaceChild()等等用的比较多。用法链接：http://www.w3school.com.cn/jsref/dom_obj_all.asp，http://www.w3school.com.cn/htmldom/dom_methods.asp
 
   
如果是关于table对象的：deleteRow()，insertRow()等方法，rowIndex属性返回某一行在表格的行集合中的位置。用法链接http://www.w3school.com.cn/jsref/dom_obj_table.asp,http://www.w3school.com.cn/jsref/prop_tablerow_rowindex.asp
 
   
这里插入一个事件代理的情况（死记吧），用法链接： http://blog.csdn.net/weinideai/article/details/3835839                                                                                  
 
  
 
  
 
 
  
 
   
 例子（任务18代码片段）：
 
  
 
  
function randomOut(event) {

    event = event||window.event;
    var target = event.target||event.srcElement;
    var index = target.getAttribute("id");
    if(target.tagName.toLowerCase()=="span") {
        // alert(target.tagName);
        arr.splice(index, 1);
        render();
    }
    return 0;
}
numQueue.onclick = randomOut;
 
  
 
 
  
 
   。。。待续