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!
