What I

function creatediv(){
            const creatediv = document.createElement('div');
            creatediv.innerHTML ="ADDED!";

            document.getElementsByClassName("box1").appendChild(creatediv);
        }

<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
   <i class="fa-solid fa-plus fa-xl"></i>
</button>

What I

function creatediv(){
            const creatediv = document.createElement('div');
            creatediv.innerHTML ="ADDED!";

            document.getElementsByClassName("box1").appendChild(creatediv);
        }

<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
   <i class="fa-solid fa-plus fa-xl"></i>
</button>

want to do is create a div with text ADDED! inside the div ofclass="box1" , it work with id instead class, how to do that with class, Thank you

• javascript
• html
• css

5 Answers 5

In case you are looking for an explanation as to why your specific code snippet is not working: getElementsByClassName returns an array. You need to refer to it with index [0]

Refer working snippet below:

function creatediv() {
  const creatediv = document.createElement('div');
  creatediv.innerHTML = "ADDED!";

  document.getElementsByClassName("box1")[0].appendChild(creatediv);
}

<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
   Add<i class="fa-solid fa-plus fa-xl"></i>
</button>

It's because you are using class instead of ID, id is a unique Identifier, so every time to get an Element by its id you always refer to the One element On the page. instead, if you get Element by Class name because multi-element can have that class you always must deal with an array of DOM Element

document.getElementsByClassName return HTMLCollection

HtmlCollection is array of Element

document.getElementById return Element

function creatediv() {
  const creatediv = document.createElement('div');
  creatediv.innerHTML = "ADDED!";

  document.getElementById("box1").appendChild(creatediv);
}

<div id="box1"></div>
<button class="creatediv" onclick="creatediv()">
   <i class="fa-solid fa-plus fa-xl"></i>
</button>

Its not working because document.getElementsByClassName("box1") returns array of elements ,as there can be multiple elements with same class name You can solve this by either of these two ways

selecting a particular element from array

document.getElementsByClassName("box1")[0].appendChild(creatediv);

or using id selector like

 document.getElementsById("box1").appendChild(creatediv);

personally I would suggest the second method as ids are unique

you use document.getElementsbyClassName() . so this method get all box class name and return to you a array. so you have you should use querySelector method , like this :

document.querySelector(".box").appendChild(yourElement);