Ubicar elementos creados en el DOM

Autor: | Última modificación: 19 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!