Javascript中数据插入（绑定）到页面的三种方法

Javascript中数据插入页面的三种方式

• JSON 格式的数据：属性名和属性值都用双引号""包裹起来；当然，要是属性值是数字可以不用双引号
• 普通对象的数据：属性值用单引号''包裹起来，属性名不用

   var ary={"name":"icessun","age":18,"sex":"boy"}

   var ary={name:'icessun',age:18,sex:'boy'}

第一种方法：字符串拼接

最常用的，也是最简单的方法
字符串插入到页面用innerHTML
dom元素插入到页面用appendchild(元素标签)

数据源：(JSON格式数据的数组)
  var ary=[
           {"name":"icessun","age":18},
           {"name":"icessunt","age":28},
           {"name":"ices","age":8},
           {"name":"sun","age":88}
          ]

插入页面的格式：
     <div><span>姓名</span><span>年龄</span></div>

css美化代码：
       div{
            width:200px;
            height:30px;
            margin-bottom:10px;
            background: #ff0000;
            background: lightgray;
        }
        span{
            width:50%;
            line-height: 30px;
            height: 100%;
            display: inline-block;
        }

• JS代码

   var aDiv=document.getElementsByTagName('div');
   //需求：给每一个div元素上面添加鼠标移入移出的效果
   for(var i=0;i<aDiv.length;i++){
   //事件发生是异步的
         aDiv[i].onmouseover=function(){
              this.style.background='pink';
         };
         aDiv[i].onmouseout=function(){
              this.style.background='';
         }
   }
 //开始字符串拼接  ary是前面创建的数据源
 var str='';
 for(var i=0;i<ary.length;i++){
    var cur=ary[i];
    str+='<div><span>'+cur.name+'</span><span>'+cur.age+'</span></div>'
}
//document.body.innerHTML会把页面里面的东西重新取一遍，插入页面
document.body.innerHTML+=str;

• 这个方法产生的问题：

  • 当我们在字符串拼接的前面给页面的元素标签添加事件的时候，等到页面加载完成后，会发现前面添加的事件都已经失效了；原因是：当我们把字符串拼接到页面的时候，会把页面的东西全部取一遍，导致以前添加的事件失效。

• 这个问题的解决办法：

  • 把给页面以前的元素添加事情的代码放在拼接字符串，插入到页面后面。

第二种方法：DOM动态插入

可以解决上面这个方法带来的问题-----导致页面以前元素添加的事件失效；但是效率要底下，因为会重复的操作DOM元素页面。
页面的代码全部是动态创建的

• js代码：

   for(var i=0;i<ary.length;i++){
       var cur=ary[i];
       var oDiv=document.creatElement('div');
       //对象的遍历 根据对象有多少个索引创建多少个span标签
       for(var attr in cur){
            var oSpan=document.creatElement('span');
            //字符串的添加
            oSpan.innerHTML=cur[attr];
            //标签对象的添加
            oDiv.appendChild(oSpan);
        }
         document.body.appendChild(oDiv);
   }

第三种方法：文档碎片Fragment

就是类似于，我们把需要的全部东西都打包带走，而不是需要一个拿一个，这样就很好的解决效率的问题，相比第二种来说，这个效率比较高

• JS代码

//创建一个碎片
var frg=document.creatDocumentFragment();
for(var i=0;i<ary.length;i++){
    var oDiv=document.creatElement('div');
         for(var attr in ary[i]){
             var oSpan=document.createElement('span');
             oSpan.innerHTML=ary[i][attr];
             oDiv.appendChild(oSpan);
          }
frg.appendChild(oDiv);//把每个创建好并且有内容的div放入文档碎片中
}
document.body.appendChild(frg);//最后一次性把frg插入到页面
frg=null;//销毁碎片，性能优化