Javascriptでデータをページに挿入(バインディング)する3つの方法

Javascriptでデータをページに挿入する3つの方法

JSONフォーマットのデータ:属性名と属性値はダブルクォーテーション""で包まれています.もちろん、属性値が数字なら、二重引用符を使わなくてもいいです.

一般対象のデータ:属性値はシングルクォーテーション''で包まれています.属性名は

ではありません.

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

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

第一の方法:文字列スティッチング
最も一般的であり、最も簡単な方法文字列がページに挿入され、innerHTML dom要素でページに挿入される.

   ：(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;
        }

appendchild( )

   var aDiv=document.getElementsByTagName('div');
   //  ：    div               
   for(var i=0;i'+cur.name+''+cur.age+'

)
//document.body.innerHTMLはページの中のものをもう一度取り出して、ページに挿入します.
Dcument.body.innerHTML+=str;

この方法によって生成されるJS :

文字列スティッチングの前でページの要素ラベルにイベントを追加すると、ページのロードが完了するまで、前に追加されたイベントはすべて無効になりました.文字列をページにつづり合わせると、ページの内容を全部取ってしまい、以前に追加したイベントが無効になります.

この問題の :

ページの前の要素にイベントを追加するコードをつなぎ合わせ文字列に置いて、ページの後ろに挿入します.

第二の方法: 動的挿入
上記の方法による問題を解決できます.ページの前の要素が追加されたイベントが無効になります.しかし、効率は以下の通りであり、動作が繰り返されるので、DOM要素ページが必要である.ページのコードはすべて動的に作成されます.

DOM

   for(var i=0;i

第3の方法:文書の断片js ：つまり、必要なものは全部包装して持っていきます.一つを持つ必要がないのではなく、効率のいい問題を解決します.二つ目に比べて、この効率は高いです.

Fragmentコード

//      
var frg=document.creatDocumentFragment();
for(var i=0;i