¿Cómo crear, anexar y borrar elementos?

javascript

Tiempo de lectura:

Publicado:

En algunas ocasiones debemos agregar o borrar elementos HTML de manera dinámica para cambiar el contenido de nuestra página.

JavaScript nos permite todo esto por medio de algunos métodos.

createElement()

Dentro del objeto global document existe la acción createElement() que nos ayuda a crear nuevos elementos HTML.

Dentro del argumento debemos pasar el nombre de la etiqueta que queremos crear, por ejemplo:

<body>
  <script>
    let miElemento = document.createElement("div");
    console.log(miElemento);
  </script>
</body>

Dará como resultado:

Terminal window
<div></div>

Ahora podemos manipularlo para agregar algunas propiedades:

// ...
let miElemento = document.createElement("div");
miElemento.textContent = "TEXTO";
miElemento.style.color = "tomato";
console.log(miElemento);
// ...

Ahora tendremos:

Terminal window
<div style="color: tomato;">TEXTO</div>

Ahora que tenemos un nuevo elemento ¿por qué no aparece en nuestra página?

Eso se debe a que JavaScript sólo está creando el elemento, el cual está flotando en el espacio (de memoria del navegador).

Para hacerlo visible debemos anexarlo al documento.

appendChild()

Todos los elementos HTML disponen de la acción appendChild() para anexar otros elementos dentro de sí mismos.

En este caso queremos agregar miElemento a body para que sea visible.

Para acceder al cuerpo podemos usar document.body, y como es un elemento HTML (<body>) podemos usar dicha acción.

Como argumento debemos pasar el elemento que queremos anexar.

// ...
let miElemento = document.createElement("div");
miElemento.textContent = "TEXTO";
miElemento.style.color = "tomato";
document.body.appendChild(miElemento);
console.log(document.body);
// ...

Y esta vez mandamos el cuerpo del documento a consola:

Terminal window
<body><div style="color: tomato;">TEXTO</div></body>

Y sólo hasta este momento podemos ver el elemento que creamos mediante JavaScript.

Visualización

remove()

Si queremos borrar un elemento dentro del documento podemos utilizar la acción remove(), la cual también está disponible en cualquier elemento HTML.

<body>
  <p>Mi texto<span> a remover</span></p>
  <script>
    let elemento = document.querySelector("span");
    elemento.remove();
    console.log(document.body);
  </script>
</body>

En este caso estamos seleccionando el elemento <span> que se encuentra en el documento y luego llamando su función remove() para eliminarlo.

Antes de que se ejecute el script tenemos esto:

Visualización

Y después de su ejecución tenemos esto:

Visualización

Comentarios

Artículos relacionados

📱 🖼️
javascript

¿Cómo seleccionar elementos?

javascript

¿Cómo modificar elementos?