Añadir Javascript

Michael Zippo 04.11.2021

El método JavaScript appendChild () agrega un elemento al final de un nodo. appendChild () se usa a menudo para agregar

elementos a una lista. Debe utilizar varias instrucciones appendChild () si desea agregar más de un elemento a un nodo.

Algunas listas contienen texto; otros directorios contienen imágenes; otras listas contienen elementos web personalizados. Independientemente del contenido de una lista, una cosa es segura: las páginas web están llenas de listas.

Cuando crea una lista, generalmente codifica sus valores "Äã" en HTML. Este proceso se puede acelerar usando un método llamado JavaScript appendChild. Este método le permite agregar un elemento al final de una lista u otro elemento web, como una cita en bloque.

En esta guía, hablaremos sobre lo que appendChild ( ) está en JavaScript y cómo funciona. Veremos un ejemplo para empezar. ¡Comencemos!

¿Qué es appendChild JavaScript?

appendChild () agrega un nodo al final de un nodo principal. appendChild () se usa comúnmente para agregar elementos a una lista HTML. Un nodo hace referencia a cualquier elemento del modelo de objeto de documento HTML (DOM).

La sintaxis de appendChild () se ve así:

"padre" se refiere al elemento al que desea agregar un elemento secundario. "Niño" es el elemento que desea agregar al final del padre.

Debe usar un método como JavaScript getElementById() u otro "Obtener" para recuperar un elemento. Alternativamente, puede crear un elemento HTML en JavaScript y luego usar ese elemento como un objeto "principal" con appendChild ().

Por ejemplo, una lista de recetas de bollos sería contener una lista de nodos. Estos nodos probablemente serían

porque crearíamos una lista.

Un padre

Configuración de un front-end

Para Primero, instalaremos una interfaz básica que muestra nuestra lista de nombres de estudiantes Abra un archivo llamado index.html y pegue este código:

Hemos creado un documento HTML básico. Este documento contiene un título y una lista sin subelementos. La lista está representada por la etiqueta
.
Ahora agreguemos algunos estilos a nuestra pagina en un archivo llamado styles.css para mejorar la estetica de nuestra web pa ge:

Esta regla CSS definirá un color de fondo gris claro para nuestra página. Para ello, utilizamos la propiedad CSS background-color . También mueve el contenido de la etiqueta al centro de la página. Para obtener más información sobre cómo estructuramos el diseño, consulte nuestra Guía de modelos de cajas CSS .
Nuestra página aún no funciona. No hemos añadido nada a la lista. Esto es lo que nuestras miradas página como cuando se abre en un navegador:

Usar el método JavaScript appendChild ()

appendChild () nos permite agregar elementos a un nodo. El siguiente código en la parte inferior del archivo scripts.js:

Esto agregará el elemento de la lista que creamos anteriormente a nuestra lista. Abramos nuestra página web y veamos los resultados:

nuestra lista es ahora una parte, nosotros puede hacer que nuestro código sea más eficiente mediante la creación de una función que agregue elementos a nuestra lista. Esto nos permitirá agregar más elementos sin tener que repetir nuestro código createElement anterior.
Edite createElement y textContent líneas de código para verse así:

Esta función creará un nuevo elemento
cada vez que se llame. A continuación, modifique la instrucción appendChild () para usar esta función:

Esto creará tres estudiantes: Mark, Chloe y Louise. Abramos de nuevo nuestro archivo index.html y veamos si se han realizado los cambios: