logo

Use appendChild() en JavaScript para agregar elementos de página [Ejemplos]

El Node.appendChild() El método agrega un nuevo elemento HTML a la página (a través del DOM). Este artículo le mostrará cómo usarlo.

El DOM en JavaScript

El HTML DOM (Document Object Model) es la interfaz que utiliza JavaScript para leer e interactuar con los elementos de la página HTML.

Es una estructura de datos que representa cada etiqueta HTML presente en la página, desde el elemento raíz  que envuelve su página hasta cada 

, 

,  y  – todo en la página está representado en el DOM, tanto el contenido como la estructura.

Cada elemento HTML se representa en el DOM como Nodo – una abstracción del elemento en la página.

Agregar/Actualizar el DOM

El DOM hace que sea muy conveniente agregar, eliminar y actualizar elementos HTML visibles e invisibles en la página. Por ejemplo, es la forma ideal de agregar filas a una tabla u opciones a una lista desplegable desde JavaScript según la entrada del usuario o los datos que se recuperan.

sintaxis del método appendChild()

El método appendChild() debe llamarse desde un objeto DOM Node y tiene la siguiente sintaxis:

NODE.appendChild(CHILD);

Tenga en cuenta que:

  • NODO es el nodo al que desea agregar un elemento secundario
  • NIÑO es el elemento secundario que desea agregar a NODE
  • El valor de retorno de appendChild() es el NIÑO adjunto Nodo
    • Si el elemento secundario adjunto es un Fragmento de documento sin padre y, en su lugar, se devuelve DocumentFragment vacío

Agregar elementos usando appendChild() – Ejemplos

Para usar appendChild() método, primero debemos tener un elemento HTML (que se representará en el DOM) para trabajar. Una lista es un buen ejemplo, ya que los elementos se pueden agregar usando appendChild() :

<ul id="my-list">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>

Arriba, se crea una lista HTML simple con el id de mi-lista .

El siguiente JavaScript agregará un elemento a la lista usando appendChild() método:

var myList = document.getElementById('my-list');
var newListItem = document.createElement('li');
newListItem.innerText = 'List item 3';
myList.appendChild(newListItem);

Primero, la lista existente en el DOM HTML se recupera usando getElementById() .

Luego, se crea un nuevo elemento de lista usando createElement() . Este es el nuevo elemento secundario que se agregará.

El texto para el nuevo elemento secundario se establece configurando su texto interior propiedad.

Finalmente, appendChild() se puede usar para agregar el nuevo elemento de la lista como un objeto secundario de la lista existente my-list .

Para eliminar un elemento secundario en lugar de agregarlo, use removeChild() en su lugar.