Unable to create div inside a div by click on a button

user_13964720 0
Viewed 78

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

css html javascript
5 Answers

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>

user_140078380

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

user_24755720

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>

user_148135770

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

user_88939470

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);
user_136534810
Related