what is the best way to write a for in loop to the page

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

score 1 · Accepted Answer · edited May 23 '17 at 11:48

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

edited May 23 '17 at 11:48

Community

1
1

answered Oct 02 '12 at 00:43

Ian

50,146
13
101
111

I was thinking of doing something like David was trying to do below, but this works too. It is better practice to create the nodes like the example below correct? – pixel 67 Oct 02 '12 at 00:54
@pixel67 I really don't know which is better. When dealing with more complicated things, like deeper nested elements and event handling, it's probably preferred to use `createElement` and manipulate things like that. But if you're doing something simple like this, I really don't know if it makes a difference. You can take a look at http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode – Ian Oct 02 '12 at 00:57

score 0 · Answer 2 · answered Oct 02 '12 at 00:43

0

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

answered Oct 02 '12 at 00:43

David G

94,763
41
167
253

@Kinected Where do you see that? – Ian Oct 02 '12 at 00:48
@David this only puts the last item of the object to the page – pixel 67 Oct 02 '12 at 00:50
@pixel67: It puts all the items on the page, but they're all in a single `
` element, which doesn't seem to be what's wanted. Also, it appends the `
` to the `body`, which isn't quite right.

I Hate Lazy

Oct 02 '12 at 00:51

what is the best way to write a for in loop to the page

2 Answers2