javascript - for in ループをページに書き込む最良の方法は何ですか?

Question

var family = {
    dad: 'Father',
    mom: 'Mother',
    son: 'Boy',
    daughter: 'Girl'
}

for ( var person in family ) {
    console.log('<li>' + 'the ' + person + ' is a ' + family[person] + '</li>')
}

これをコンソールに記録するのではなく、DOM に挿入する最良の方法を知りたいです。JavaScriptだけを使いたい

Answer 1

HTMLにすでに含まれているものに依存します。持っているものをそのまま追加するだけなら、次のように使用するのも悪くありません。

var all_family = "";
for (var person in family) {
    all_family += "<li>the " + person + " is a " + family[person] + "</li>";
}
document.getElementById("main_ul").innerHTML = all_family;

ここで、「main_ul」は次のとおりです。

<ul id="main_ul"></ul>

別のオプションは次のとおりです。

var ul = document.getElementById("main_ul");
for (var person in family) {
    var li = document.createElement("li");
    li.innerHTML = "the " + person + " is a " + family[person];
    main_ul.appendChild(li);
}

どちらを使用するかを決めるのに役立つかもしれないもの: "innerHTML += ..." vs "appendChild(txtNode)"

Answer 2

ネイティブのクロスブラウザー DOM メソッドが最も安全です。

var list = document.createElement('li');

for (var person in family)
   list.appendChild(
       document.createTextNode('the person is a ' + family[person]) );

document.body.appendChild( list );