在页面中编写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>')
}

I want to know what the best way to insert this into the DOM instead of logging it to the console. I want to use just JavaScript

Answer 1

Depends on what is already in the HTML. If you're simply adding exactly what you have, it wouldn't be a bad idea to just use:

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;

where "main_ul" is:

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

Another option is:

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

Something you might look at to help decide which to use: "innerHTML += ..." vs "appendChild(txtNode)"

Answer 2

Native, cross-browser DOM methods are the safest.

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

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

document.body.appendChild( list );