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

What I

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

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

<div ></div>
<button  onclick="creatediv()">
   <i ></i>
</button>

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

CodePudding user response：

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 ></div>
<button  onclick="creatediv()">
   Add<i ></i>
</button>

CodePudding user response：

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

CodePudding user response：

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  onclick="creatediv()">
   <i ></i>
</button>

CodePudding user response：

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

CodePudding user response：

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