Cómo agregar a un niño en DOM utilizando el método AppendChild en JavaScript?

Si desea cambiar cualquier elemento en HTML usando el lenguaje de secuencias de comandos, entonces debe consultar DOM también conocido como modelo de objeto de documento. DOM en su propio núcleo es una interfaz de programación simple para ese archivo HTML o, en otras palabras, para la página web específica. Ningún lenguaje de secuencias de comandos es de ningún uso sin una interfaz DOM cuando se trata de manipular elementos HTML.

Una de las manipulaciones de página web más comunes es reemplazar un nodo o agregar un nodo infantil dentro de un nodo principal. Esto se puede hacer a través del añadir Niño() Método en JavaScript.

Qué es .método appendchild ()

El .añadir Niño() El método es una función de JavaScript incorporada que se utiliza para agregar un nodo secundario bajo un nodo principal. El .añadir Niño() realiza esta hazaña haciendo uso de la Interfaz de nodo DOM. Ahora estamos familiarizados con lo que hace, así que veamos su sintaxis.

Sintaxis de .método appendchild ()

La sintaxis de .añadir Niño() se explica por sí mismo. Es como:

parentnode.appendChild (niendo);

Como puede ver claramente, consiste en lo siguiente:

• parentnode: El elemento en el que se debe agregar el otro nodo.
• nodo infantil: El elemento a agregar.

¿Cuándo se usa el método appendchild ()?

El .añadir Niño() Agrega un elemento recién creado dentro del DOM. También se usa cuando tiene que reorganizar un elemento ya existente. En la mayoría de los casos, ambas características, reorganizando los elementos existentes y la creación de un nuevo elemento, y luego agregarlo al DOM se realiza en un evento invocado debido a la interacción del usuario con la página web. Este evento podría hacer clic en un botón en la pantalla, una ubicación específica del mouse o incluso un golpe de llave específico.

Ejemplo

No podemos aprender nada hasta que lo probemos. Así que intentemos usar el .añadir Niño() método. Deberíamos:

• Crear una página HTML con un nodo principal
• Cree un botón que invocará el proceso de agregado
• Crear un nodo infantil.
• Agregue el nodo infantil en el nodo principal en el botón Presione.

Comencemos con el primer paso que es configurar una página HTML. Crear un nodo principal creando un div con un id = "demostración": Dentro de este div, le damos un nodo infantil que es un

etiqueta:

Este es el párrafo 1 dentro de la etiqueta "div"

Hagamos el nodo principal que es en nuestro caso el

etiqueta un poco prominente también dándole un color de fondo. Para hacer eso, use el id = "demo" y dale un estilo CSS con las siguientes líneas

Obtendremos los siguientes resultados.

Ahora sabemos que el nodo principal de

la etiqueta se resalta. Si agregamos cualquier nodo infantil dentro de este nodo principal, el área resaltada aumentaría.

Volver a agregar un nodo infantil. Creemos un gatillo para agregar un nodo infantil, y para ese propósito, vamos a agregar un botón en la pantalla con la siguiente línea:

Haga clic en AppendChild

Con esto, nuestra salida se convierte en:

Necesitamos declarar la función que agregará un nodo infantil dentro del div En cada botón presione. Crea la función como esta:

Sea contador = 2;
función btnClicked ()
// Agregue el código posterior dentro de aquí.

Como puede notar, creamos una variable llamada "contador". Esta variable mantendrá una verificación de cuántos nodos infantiles hemos agregado en el nodo principal. Ya que ya tenemos un

etiqueta Como primer hijo, comenzamos el mostrador de "2".

Ahora necesitamos un nodo infantil. Para esto, vamos a crear un

etiqueta Con algo de texto dentro de él. Para crear un

etiqueta, primero necesitamos crear un Textnode y un nodo de párrafo y luego agregar el nodo de texto al

etiqueta nodo.

Crear un Textnode Con el siguiente comando:

TextNode = documento.CreateTextNode ("Este es el párrafo" + contador + 'interior "div" etiqueta);

Como puede ver, estamos utilizando el valor del contador para solicitar al usuario sobre cuántos nodos infantiles están presentes en el nodo principal.

Lo siguiente es crear el

Elemento de la etiqueta:

ptag = documento.createElement ("P");

Ahora necesitamos agregar el Textnode en el ptag:

ptag.appendChild (textNode);

Por último, necesitamos agregar esto ptag dentro de div con el id = "demostración":

parentNode = documento.getElementById ("demo");
parentnode.AppendChild (PTAG);

Antes de salir del btnClicked () función, necesitamos aumentar el valor del mostrador también:

contador ++;

El fragmento de código completo se verá así:

Tiempo para finalmente ejecutar nuestra página web y mirar los resultados. Deberías ver esto en tu pantalla:

Ahí lo tienes, hemos agregado con éxito varios nodos infantiles dentro de un nodo principal. También podemos confirmarlo examinando el nodo principal dentro de las herramientas de desarrollador del navegador.

Podemos ver claramente que todos los nodos infantiles (

las etiquetas) de hecho se adjuntan en el div con el id = "demostración".

Conclusión

El .añadir Niño() El método de JavaScript se utiliza para agregar un nodo infantil dentro de un nodo principal con la ayuda de la interfaz DOM Node. Manipular los elementos de la página web utilizando un lenguaje de secuencias de comandos es una tarea importante. Una de las tareas comunes al manipular las páginas web es agregar elementos como nodos infantiles a otros elementos. Aprendimos cómo el .añadir Niño() El método funciona, su sintaxis y cuando se usa. Creamos una página web HTML, un nodo principal y nodos infantiles adjuntos dentro de ella utilizando el .añadir Niño() función.