El Document Object Model, también conocido como DOM por sus siglas en inglés, es un concepto que nos permite acceder y modificar los datos de los distintos elementos de un archivo HTML. Este concepto se basa en la estructura de árbol jerárquico que ordena las etiquetas HTML de nuestro archivo en orden de parentesco. En este post, te enseñaremos cómo crear elementos en el DOM desde nuestro código JavaScript usando distintos métodos.
Antes de empezar a crear elementos en el DOM
Antes de enseñarte cómo crear elementos en el DOM, te presentaremos el código con el que vamos a trabajar los distintos ejemplos que usaremos a continuación.
Como te lo hemos explicado en nuestro post sobre el Document Object Model, el DOM es un árbol jerárquico de etiquetas HTML que se organiza en orden de parentesco. Como puedes leer en nuestro post sobre cómo entender el DOM desde el inspector web, este árbol se crea mientras estructuramos nuestros proyectos en HTML. Luego, podemos revisar esta estructura más fácilmente desde nuestro inspector, que ordena las etiquetas unas dentro de otras según su parentesco.
Ahora, te enseñaremos cómo crear elementos en el DOM siguiendo la siguiente estructura básica HTML:
<body>
<main></main>
</body>¿Cómo crear elementos en el DOM?
Desde cualquier nodo, podemos realizar búsquedas de elementos hijos para ir más rápido y modificar todos los nodos que haya dentro de una etiqueta. Para ello, usamos los distintos métodos y propiedades de la clase Element del DOM, de la cual se instancian todas las etiquetas HTML. A continuación, te mostramos los distintos métodos que debemos usar para crear elementos en el DOM.
document.createElement (‘tag name’)
El método document.createElement (‘tag name’) nos permite crear un elemento a través de la palabra clave document. Como puedes ver, este método nos permite crear un tag o etiqueta HTML al pasarla como parámetro. A continuación, te mostramos cómo usaríamos este método para crear un div:
document.createElement ('div')Al darle a enter tras escribir este método, obtendremos como respuesta un div. Lo mismo sucedería con cualquier otra etiqueta HTML:
> document.createElement ('img')
> <img>
> document.createElement ('p')
> <p>En este sentido, el método document.createElement nos va a permitir crear nodos HTML.
Aunque este método nos permite crear nodos HTML, fíjate en que estos no están apareciendo en nuestro navegador a medida que los creamos. Esto se da porque usar un document.createElement es prácticamente como crear un elemento en el limbo. Es decir, se crea un elemento sin conexión ni relación de parentesco en nuestro árbol jerárquico. Esto significa que, aunque hemos creado un elemento, no lo veremos en el DOM porque no pertenece a ese árbol del DOM. Para conocer más sobre este método, te invitamos a leer la documentación de document.createElement ( ) en la página oficial de Mozilla Developer Network.
Ahora, para crear elementos en el DOM, debemos, después de crear el elemento, meterle contenido. Para meter datos dentro de nuestros elementos podemos usar, por ejemplo, la propiedad textContent:
p.textContent = 'párrafo creado con createElement'Luego, el paso final para crear elementos en el DOM es ubicarlo dentro de nuestra estructura. Para ello, te invitamos a leer nuestro post sobre ubicar elementos creados en el DOM. Por ahora, te hacemos un pequeño spoiler sobre los métodos que nos ayudarán a ubicar y modificar nuestros nodos:
nodo.appendChild (<Element>): desde un nodo podemos hacer un appendChild de un elemento.nodo.innerHTML = '<html code>':con este método podemos cambiar el código HTML de un nodo al igualarlo al nuevo código.nodo.outerHTML = '<html code>':al igual que con el comando innerHTML, con este método podemos cambiar el código HTML de un nodo al igualarlo al nuevo código.
Al leer este post no solo has aprendido cómo crear elementos en el DOM, sino que también has dado un paso importante en tu formación como desarrollador web. Ahora, el siguiente paso es aprender sobre otros lenguajes y modos de programación para la web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar con JavaScript, HTML, CSS y mucho más. ¡Anímate a dar este paso en tu formación y matricúlate ahora para destacar en el mercado laboral!
