Javascript - 複数のHTML要素を効率的に挿入する

Question

select要素を、ユーザーのFacebookフレンド（JSONオブジェクトとして取得）のリストとともに作成したいと考えています。私は私のHTMLに<select id="friends"></select>をハードコーディングし、JSONを解析するために、次のJavaScriptコードを使用してselect要素のoptionとして各友人を挿入します。

var msgContainer = document.createDocumentFragment(); 
for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(document.createTextNode('<option value="'+response.data[i].id+'">'+response.data[i].name+'</option>'));  
} 
document.getElementById("friends").appendChild(msgContainer); 

ほとんどそれが<と>の代わり<挿入していることを除いて、動作します。このおよび>。どうすれば修正できますか？純粋なJavascript（JQueryではなく）を使用して複数のHTML要素を挿入する効率的な方法がありますか？

Answer 1

テキストノードを作成する理由はわかりませんが、option要素を作成すると思われるので、代わりにOptionコンストラクタを使用できます。

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(new Option(response.data[i].name, response.data[i].id)); 
} 
document.getElementById("friends").appendChild(msgContainer); 

---

それとも、ジェネリックdocument.createElement()を使用することができます。

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    var option = msgContainer.appendChild(document.createElement("option")); 
    option.text = response.data[i].name; 
    option.value = response.data[i].id; 
} 
document.getElementById("friends").appendChild(msgContainer); 

---

これは、要素を作成し、同時にプロパティを設定するためのヘルパー関数を持っていてうれしいです。

は、ここに1つの簡単な例です：いくつかの特定のニーズをカバーするために拡張することができ

function create(name, props) { 
    var el = document.createElement(name); 
    for (var p in props) 
     el[p] = props[p]; 
    return el; 
} 

が、これは、ほとんどの場合のために動作します。

あなたはこのようにそれを使用したい：

var msgContainer = document.createDocumentFragment(); 

for (var i = 0; i < response.data.length; i++) { 
    msgContainer.appendChild(create("option", { 
     text: response.data[i].name, 
     value: response.data[i].id 
    })); 
} 
document.getElementById("friends").appendChild(msgContainer); 

Answer 2

ではなく、あなたのforループでこれを試してみてください：

var o = document.createEleent('option'); 
o.setAttribute('value', response.data[i].id); 
o.appendChild(document.createTextNode(response.data[i].name)); 
msgContainer.appendChild(o);