1 <div>2 ????<ul id="list">3 ????????<li>11111111111</li>4 ????????<li>22222222222</li>5 ????????<li>33333333333</li>6 ????</ul>7 </div>
我为ul中的每个li绑定了事件，鼠标移入变换背景色（为了演示代码，这里没有使用事件代理，如果使用事件代理，对于本例无效）
1 var data = ["aaa", "bbb", "ccc"]; 2 ?3 var oUl = document.querySelector("#list"); 4 var oLi = document.getElementsByTagName("li"); 5 ?6 for(var i = 0; i < oLi.length; i++) { 7 ????oLi[i].onmouseover = function(e) { 8 ?9 ????????e.target.style.backgroundColor = "pink";10 11 ????}12 ????oLi[i].onmouseout = function(e) {13 14 ????????e.target.style.backgroundColor = "";15 16 ????}17 }（此例使用事件代理写法是这样，不过对于本案例无效，所以不使用这种方法）
1 oUl.onmouseover = function(e) { 2 ????if(e.target.tagName == "LI") { 3 ????????e.target.style.backgroundColor = "pink"; 4 ????} 5 } 6 oUl.onmouseout = function(e) { 7 ????if(e.target.tagName == "LI") { 8 ????????e.target.style.backgroundColor = ""; 9 ????}10 }1.动态插入节点(优点:不影响原有结构绑定的事件，缺点：触发dom重排，非常耗性能，不建议使用)
1 var data = ["aaa", "bbb", "ccc"];2 3 var oUl = document.querySelector("#list");4 5 for(var i = 0; i < data.length; i++) {6 ????var oLi = document.createElement("li");7 ????oLi.innerHTML = data[i];8 ????oUl.appendChild(oLi);9 }2.字符串拼接(优点:只触发一次dom重排，缺点：影响原有结构绑定的事件【注意此时假如你没有使用事件代理，而是使用循环为每个li添加事件，才会出现原有结构绑定的事件无效，否则，原有事件依然有效，这其实也体现了事件代理的一个优势，就是不关心子元素如何变化，只要父元素没有变化，事件依然有效】)
1 var str = "";2 for(var i = 0; i < data.length; i++) {3 ????str += "<li>";4 str += data[i];5 str += "</li>"6 }7 8 oUl.innerHTML += str;3.dom碎片(前两种方法的综合，既考虑性能，又不影响原有结构)
1 var frg = document.createDocumentFragment(); 2 ?3 var str = ""; 4 for(var i = 0; i < data.length; i++) { 5 ????var oLi = document.createElement("li"); 6 ????oLi.innerHTML = data[i]; 7 ????frg.appendChild(oLi); 8 } 9 10 oUl.appendChild(frg);js数据绑定(模板引擎原理)
原文地址：http://www.cnblogs.com/zt123123/p/7618085.html