Append Div with Multiple Child Divs Using For Loop

Question

I realize that this has been asked a million times... but sorting through all the ones I've found, I haven't found one that really explains it well.

HTML:

<div id="alphabet"></div>

JS:

var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", 
                "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

var target = document.getElementById('alphabet');

for (i = 0; i < 26; i++) {

    var newLink = document.createElement('div');
    target.appendChild = newLink;
    newLink.innerHTML = alphabet[i];
}

alert(alphabet);
alert(newLink);
alert(target);

Obviously there is something I'm missing... With such a simple example I can't believe I'm having this much trouble. Any help is much appreciated, thanks in advance!

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-28 18:16:59Z

2

Basically node.appendChild(node) is a function.

target.appendChild(newLink);

And your full code would be,

for (i = 0; i < 26; i++) {
 var newLink = document.createElement('div');
 newLink.innerHTML = alphabet[i];
 target.appendChild(newLink);
}

answered Mar 28, 2016 at 18:16

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

perkface Over a year ago

Thank you for your complete and swift response. I (hilariously) just made the opposite mistake with the .innerHTML not being a function. It is working as intended now. I will mark your answer as accepted once the timer allows me to.

Rajaprabhu Aravindasamy Over a year ago

@perkface Glad to help! :)

Collectives™ on Stack Overflow

Append Div with Multiple Child Divs Using For Loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related