10

selectユーザーの Facebook 友達のリスト (JSON オブジェクトとして取得) を持つ要素を作成したいと思います。HTMLにハードコーディング<select id="friends"></select>し、次の Javascript コードを使用して JSON を解析し、各フレンドを要素の として挿入しoptionますselect。

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);

&lt;これは、 and&gt;の代わりに<and を挿入することを除いて、ほとんど機能し>ます。どうすれば修正できますか?純粋なJavascript(JQueryではなく)を使用して複数のHTML要素を挿入するより効率的な方法はありますか?

4

2 に答える 2

25

テキストノードを作成する理由はわかりませんが、要素を作成したいように見えるので、代わりにコンストラクターを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);

要素の作成とプロパティの設定を同時に行うためのヘルパー関数があると便利です。

以下に簡単な例を示します。

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);
于 2013-06-23T19:05:00.513 に答える
0

代わりに for ループでこれを試してください:

var o = document.createElement('option');
o.setAttribute('value', response.data[i].id);
o.appendChild(document.createTextNode(response.data[i].name));
msgContainer.appendChild(o);
于 2013-06-23T19:09:13.463 に答える