appending a div to a classname using javascript

Question

var wrapper = document.getElementsByClassName('.wrapper');

for(var i =0; i < 10; i++){  //create grid of buttons

    var num = document.createElement("div");
    var node = document.createTextNode(i);
    num.appendChild(node);
    wrapper.appendChild(num);
    num.className = "number";

}

It throws an error that wrapper is not defined, it only worked when I used document.body instead of wrapper, but I want to append them divs to the wrapper div any suggestions ?

Is there only one element with class wrapper? If so, replace getElementsByClassName with querySelector (Element.querySelector()) — Andreas
– Andreas, Commented Jun 10, 2017 at 10:40
it is the only element with that class in the whole document — syefox
– syefox, Commented Jun 10, 2017 at 10:43

Sampgun · Accepted Answer · 2017-06-10 10:42:49Z

1

var wrapper = document.getElementsByClassName('wrapper');

instead of

var wrapper = document.getElementsByClassName('.wrapper');

EDIT:

var addButtons = function() {
 var wrapper = document.getElementsByClassName("wrapper")[0];
var num, node;
  for (var i = 0; i < 10; i++) { 
    console.info("Button"+i);
    num = document.createElement("div");
    num.className = "number";
    node = document.createTextNode(i);
    num.appendChild(node);

    wrapper.appendChild(num);

  }
}

addButtons();

https://jsfiddle.net/tonysamperi/7jzdsk08/

edited Jun 10, 2017 at 10:42

answered Jun 10, 2017 at 10:27

Sampgun

3,0313 gold badges23 silver badges39 bronze badges

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

4 Comments

syefox Over a year ago

it throws another error TypeError: wrapper.appendChild is not a function

Sampgun Over a year ago

That's because wrapper is null. I'll add a fiddle to the answer. Wait a sec.

Andreas Over a year ago

document.getElementsByClassName() will always return a HTMLCollection (<- hint) hence wrapper won't ever be null...

Sampgun Over a year ago

Yes you're right, you missed a "[0]" after the "wrapper" selector

Collectives™ on Stack Overflow

appending a div to a classname using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related