Lo que yo
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> quiero hacer es crear un div con texto ADDED! dentro del div de class="box1" , funciona con id en lugar de class, cómo hacerlo con class, gracias
En caso de que esté buscando una explicación de por qué su fragmento de código específico no funciona: getElementsByClassName devuelve una matriz. Debe referirse a él con el índice [0]
Consulte el fragmento de trabajo a continuación:
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>Es porque está utilizando la clase en lugar de la identificación, la identificación es un identificador único, por lo que cada vez que obtiene un elemento por su identificación, siempre se refiere al elemento Uno en la página. en cambio, si obtiene Elemento por nombre de Clase porque varios elementos pueden tener esa clase, siempre debe tratar con una matriz de Elemento DOM
document.getElementsByClassName devuelveHTMLCollection
HtmlCollection es una matriz de elemento
document.getElementById elemento de retorno
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>