getElementsByClass and appendChild

Question

just brushing up on my javascript skills and trying to figure out why getElementsByClass isn\'t working for my code. The code is pretty simple. Upon clicking a button \"cl

Answer 1

As you have noticed, the function is called getElementsByName with "elements" being a plural.

It returns a list of markups by their name (and not their css class).

You need to use the function that handles the class name, and get the first element of the array, or loop on all the results, depending on what you are looking for.

Answer 2

You could use getElementsByClassName(), which is supported in IE9+:

  document.getElementsByClassName("thistime")[0].appendChild(first);

But a better alternative may be querySelector(), which is supported in IE8+

  document.querySelector(".thistime").appendChild(first);

Note that querySelector() uses CSS selector syntax, so you should place a dot (.) before the class.

Snippet:

function myFunction() {
  var first = document.createElement("H1");
  var text = document.createTextNode("Jason is pretty awesome");
  first.appendChild(text);

  document.querySelector(".thistime").appendChild(first);
}

<p>Click on button to see how appendChild works</p>

<button onclick="myFunction()">Clicky</button>

<div class="thistime">Hi</div>

Answer 3

You need to update your code from

document.getElementsByName("thistime").appendChild(first);

to

document.getElementsByClassName("thistime")[0].appendChild(first);

For reference - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Working code - http://plnkr.co/edit/k8ZnPFKYKScn8iYiZQk0?p=preview