El Document Object Model, al que también se conoce como DOM por sus siglas en inglés, es un concepto que nos permite acceder a los distintos elementos de un archivo HTML. La ventaja de este concepto es que, además de acceder a los nodos HTML y sus datos, podemos modificar y crear elementos dentro del DOM. En este post, te enseñaremos cómo ubicar elementos creados en el DOM para estructurar tu archivo HTML de manera personalizada.
Un poco de contexto
En nuestro post sobre crear elementos en el DOM te hemos enseñado cómo crear una nueva etiqueta HTML desde JavaScript usando el comando document.createElement (‘ ‘). Allí también te hemos mencionado que, una vez creamos un elemento, no lo veremos inmediatamente en el DOM, pues se crea en el espacio vacío.
Entonces, para crear realmente nodos nuevos en el árbol jerárquico, deberemos ubicar elementos creados en el DOM. Solo de esta manera aparecerán en el entorno del documento.
A continuación, te enseñaremos cómo ubicar elementos creados en el DOM. Para ello, debemos tener presente en qué DOM estamos ubicando los elementos. En nuestro caso, trabajaremos con la siguiente estructura HTML:
<body>
<main> </main>
<div>hola</div>
</body>
Ten presente que esta es muy básica, pero puede complicarse en cada proyecto.
¿Cómo ubicar elementos creados en el DOM?
Lo primero que debemos hacer para ubicar elementos creados en el DOM es definir el lugar en el que los queremos ubicar. Esto es porque, para ubicar elementos, deberemos ir hasta el nodo padre en donde queramos incluir el elemento y utilizar el método nodo.appendChild.
Si quieres conocer más sobre el método que usaremos más adelante, te recomendamos ir al artículo nodo appendChild en la página oficial de la MDN. También utilizaremos un método llamado prepend.
Entonces, supongamos que hemos creado un nuevo elemento y lo hemos guardado en la variable p1:
const p1 = document.createElement (‘p’)
<p></p>
Después de crearlo, hemos usado la propiedad textContent para darle contenido a este elemento:
p1.textContent = ‘párrafo creado con createElement’
Esto quiere decir que, si le preguntamos a nuestro editor el contenido de p1, ahora nos devolverá lo que hemos escrito. Antes de esta línea de código nos devolvía un string vacío.
p1
<p> párrafo creado con createElement</p>
Ahora, queremos introducir este elemento p1 dentro de la etiqueta main de nuestra estructura HTML. Para ello, deberemos seleccionar main y utilizar el método appendChild.
Existen muchas maneras de llegar a main. Una de ellas es utilizar la propiedad children para navegar por el árbol del DOM. Esta manera funciona cuando tenemos pocos elementos en nuestra estructura. Sin embargo, si tu estructura tiene más nodos, es mejor utilizar alguno de los métodos que te hemos enseñado en nuestro post sobre seleccionar nodos del DOM.
A continuación, te mostramos cómo seleccionar main usando el método querySelector y la etiqueta main. Ten presente que esto funciona porque solo tenemos un main. Si tuviéramos más, podríamos seleccionar el que queremos usando cualquier otra característica (su id, clase, ruta, etc.).
document.querySelector (‘main’)
Ahora que tenemos seleccionado nuestro main, debemos añadir el elemento p dentro de él. Para ello, usamos .appendChild. Dentro de este método, pasaremos el elemento que queremos incluir, en este caso p1, como parámetro.
document.querySelector (‘main’).appendChild (p1)
Al ejecutar esta línea de código, verás que el p1 que hemos creado aparece en el DOM. Es decir, ahora lo podrás ver en el navegador, pues forma parte del árbol jerárquico del documento HTML.
Ahora, dentro de nuestro main no solo está el elemento p1, también teníamos previamente una etiqueta div con el texto «hola». Esto quiere decir que hemos hecho que el elemento p1 sea hermano de la etiqueta div. Ten presente que, de manera automática, el método appendChild ubica nuestro elemento como último hijo del nodo que hemos seleccionado.
Si quisiéramos modificar el orden para ubicar elementos creados en el DOM, tendríamos que usar el método prepend en vez del appendChild. Este método hará que nuestro elemento sea el primer hijo.
document.querySelector(‘main’).prepend(p1)
¿Cuál es el siguiente paso?
Al leer este post no solo has aprendido cómo ubicar elementos creados en el DOM, sino que, además, has dado un paso hacia dominar este aspecto del mundo del desarrollo web. Para aprender más sobre este y otros aspectos de este mundo, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¿A qué esperas para dar el siguiente paso en tu aprendizaje e impulsar tu futuro? ¡Inscríbete ya y triunfa en el mercado laboral!
