let myElement = document.createElement("div")Puedo acceder al elemento por:
myElement.anyMethodPero no puedo acceder por:
document.body.myElement.anyMethodEntonces, ¿por qué podemos acceder al cuerpo mediante:
document.body.anyMethodPero no podemos acceder al elemento por:
document.body.myElement.anyMethodHagamos esto simple. En DOM todos los elementos son tratados como objetos. El documento también es un objeto con atributos como cuerpo y métodos como borrado, ubicación, etc. Así que cuando estás creando un elemento con
let x=document.createElement('div') console.log(typeof(x)) //returns objectCreateElement devuelve un objeto y no crea un atributo ni nada para él. Entonces, el elemento no está conectado al objeto del documento.
x.click()X es un objeto de HTMLElement y tiene métodos como clic y atributos como id, etc. Pero cuando haces esto
document.body.x.click()El documento tiene un atributo llamado cuerpo pero el objeto del cuerpo no tiene atributos como x
document.body.x //returns undefinedEntonces, finalmente, el método createElement devuelve un objeto pero no agrega el elemento como su atributo, por lo que cuando llama así, obtiene un error indefinido.
Te falta un paso en tu código si esperas hacer referencia a él desde el DOM (a través de document.body... o document.getElement... ). Debe agregar el elemento a un lugar particular donde lo desee. Esta página de referencia muestra un ejemplo simple, pero compartiré un ejemplo relacionado con su código aquí:
let myElement = document.createElement("div"); myElement.innerHTML = "It works!"; // you can replace the following with `document.body.append(myElement)` document.getElementById("body").append(myElement); <div id="body"></div>