Método appendchild del DOM

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

El Document Object Model, también conocido como DOM por sus, nos permite acceder y modificar los elementos HTML de un proyecto directamente desde nuestro código JavaScript. En este post, te enseñaremos cómo funciona el método appendChild del DOM, fundamental para estructurar y ubicar elementos en este árbol jerárquico.

¿Qué es el método appendchild del DOM?

El método appendChild del DOM es uno de los métodos que pertenecen a la clase Element. Como puedes leer en nuestro post sobre la clase Element del DOM, esta clase es padre de todas las etiquetas HTML de este árbol jerárquico. Es decir, todos los nodos del DOM son instancias de esta clase, por lo que sus métodos y propiedades aplican para manipular todas las etiquetas.

El método appendChild del DOM recibe como parámetro un nodo HTML. Con esto nos referimos a cualquier elemento HTML que hayamos creado en nuestro archivo y forme parte del árbol jerárquico que se muestra en el navegador. Es muy importante que tengas esto en cuenta, pues no podrás pasar strings como parámetro de este método. Si quieres ver un ejemplo de cómo transformar un string a un nodo para ser procesado por el método appendChild del DOM, te recomendamos nuestro post sobre crear un listado de objetos en JavaScript frontend.

Ahora, el método appendChild del DOM recibe un nodo HTML como parámetro para añadirlo como hijo a otro nodo. Entonces, la sintaxis es la siguiente, en donde nodo es el elemento HTML, que será el padre, y el nodoNuevo entre paréntesis es el que queremos pasar como hijo.

nodo.appendChild (nodoNuevo)

Para definir el nodo padre puedes utilizar muchos métodos para seleccionar nodos del DOM. El más popular es querySelector, pues nos permite usar cualquiera de las características del nodo para seleccionarlo, ya sea su nombre de etiqueta, nombre de clase o ID.

document.querySelector (‘main’)

Después de seleccionar el nodo padre, basta con pasar el método appendChild y el nodo que queremos que sea hijo.

document.querySelector (‘main’).apprendChild (p1)

¿Cómo continuar?

Ahora que sabes qué es y cómo funciona el método appendchild del DOM, ¡es hora de que lo uses en tus propios proyectos! Si quieres seguir aprendiendo sobre el desarrollo de proyectos para la web para convertirte en todo un profesional, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. Se trata de un espacio de aprendizaje intensivo que combina la teoría con la práctica para enseñarte a dominar lenguajes como JavaScript, HTML y CSS. ¡Te esperamos!

👉 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!