JavaScript-筑基（十二）节点操作之动态生成表格案例、三种动态创建元素区别

1. 这里我们先模拟数据，采取数组对象形式储存

    var datas = [
           {
               name:'中观',
               subject:'java',
               score:100
           },{
               name:'信安',
               subject:'java',
               score:60
           },{
               name:'常常',
               subject:'javascript',
               score:98
           }];

2. 所有的数据都是放到tbody里面的行里面，通过循环创建多个行

      var tbody = document.querySelector('tbody');
           for(var i = 0; i < datas.length; i++) {
               //创建 tr行
               var tr = document.createElement('tr');
               tbody.appendChild(tr);
               //行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
               for(var k in datas[i] ) {// 遍历数组对象
                   var td = document.createElement('td');
                   //创建了单元格的同时把属性值 赋给 td
                   //console.log(datas[i][k]);     //for(vark in obj) {k得到的是属性名
                       td.innerHTML = datas[i][k]; //obj[k]得到的是属性值} 
                       tr.appendChild(td);       
               }
           }

3. 最后一列单元格为删除操作，需要单独创建单元格

      //创建操作的删除单元格
               var td = document.createElement('td');
               td.innerHTML = '<a href = "javascript:;">删除</a>';
               tr.appendChild(td);

   这是添加在第一个for创建行里面的

4. 给a链接添加删除事件

    //删除操作
           var as = document.querySelectorAll('a');
           for(var i = 0; as.length; i++) {
               as[i].onclick = function() {
                   //点击a删除 当前所在的行 node.removeChild(child)
                   tbody.removeChild(this.parentNode.parentNode);
               }
           }

三种动态创建元素的区别（及效率测试）

1. document.write(' ');创建后直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。作为了解，不适用。
2. element.innerHTML = ' '; 在创建多个元素的时候，通过拼接字符串的方式效率较低 for...{element,innerHTML +='<a href="#"></a>'}          改进方法，采用数组形式拼接，一次性创建效率更高，但是结构稍微复杂

   <script>
       function fn() {
           var d1 = +new Date();
           var array = [];
           for (var i = 0; i < 1000; i++) {
               array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
           }
           document.body.innerHTML = array.join('');
           var d2 = +new Date();
           console.log(d2 - d1);//5，6毫秒
       }
       fn();
   </script>

3. document.createElement() 创建多个元素效率稍稍低一点点，但是结构清晰

    function fn() {
           var d1 = +new Date();
   
           for (var i = 0; i < 1000; i++) {
               var div = document.createElement('div');
               div.style.width = '100px';
               div.style.height = '2px';
               div.style.border = '1px solid red';
               document.body.appendChild(div);
           }
           var d2 = +new Date();
           console.log(d2 - d1);//20毫秒
       }
       fn();

 总结：不同游览器下，innerHTML效率要比creatElement高。

---

祝你学习快乐！