getElementsByClass and appendChild

Asked 6/8, 2015 at 16:34 Answered 6/8, 2015 at 16:40

Solved javascript html css getelementbyid appendchild

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 "clicky", the script will create a child h1 element of div. It works perfectly fine when I use getElementById and changing the div class to Id but doesn't work when I change it to class.

I've tried, getElementsByClassName, getElementsByClass, getElementsByTagName and changing the div to the appropriate attribute but no luck.

<!doctype html>
<html>


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

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

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

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

}
</script>

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

    </body>






</html>

Butlery answered 6/8, 2015 at 16:34 Comment(1)

You're actually using getElementsByName(), and name is not a valid property of non interactive form elements. Secondly you're working with a NodeList or a collection, over which you have to iterate in order to use appendChild() on each element in the collection. And then it wouldn't work as you want because all you'd be doing is inserting the created element into the first element of the collection, then moving it to the second, then the third and so on until it's in the last. So you'd also need to use cloneNode or repeatedly create the created element in every iteration of said loop. – Canalize 6/8, 2015 at 16:50

You need to update your code from

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

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

Basement answered 6/8, 2015 at 16:35 Comment(0)

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>

Rudy answered 6/8, 2015 at 16:40 Comment(1)

Thanks, querySelector seems a lot more useful, I'll definitely be using it more! – Butlery 6/8, 2015 at 17:6

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.

Grandpapa answered 6/8, 2015 at 16:39 Comment(0)

Recommended topics

Hot tags