Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getElementsByClass and 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>
like image 770
Snorlax Avatar asked Aug 06 '15 16:08

Snorlax


People also ask

What is getElementsByClassName () used for?

getElementsByClassName() The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). When called on the document object, the complete document is searched, including the root node.

What is the difference between append and appendChild?

Element. append() can append several nodes and strings, whereas Node. appendChild() can only append one node.

What is appendChild used for?

The appendChild() method allows you to add a node to the end of the list of child nodes of a specified parent node. In this method, the childNode is the node to append to the given parent node. The appendChild() returns the appended child.

What is the difference between appendChild and innerHTML?

Answer : appendChild is used to insert new node in DOM. innerHTML is a property of DOM that allows to replace content of an element with different HTML, which automatically gets parsed into DOM nodes.


2 Answers

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

like image 54
Nikhil Aggarwal Avatar answered Sep 20 '22 19:09

Nikhil Aggarwal


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>
like image 22
Rick Hitchcock Avatar answered Sep 18 '22 19:09

Rick Hitchcock