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}
          ]

插入页面的格式：
     
姓名年龄

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'+cur.age+'

' } //document.body.innerHTML会把页面里面的东西重新取一遍，插入页面 document.body.innerHTML+=str;

• 这个方法产生的问题：

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

• 这个问题的解决办法：

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

第二种方法：DOM动态插入

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

• js代码：

   for(var i=0;i

第三种方法：文档碎片Fragment

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

• JS代码

//创建一个碎片
var frg=document.creatDocumentFragment();
for(var i=0;i