CreateElement

Podemos crear elementos usando el método .createElement("img") y como argumento le pasamos el elemento a crear.

const img = document.createElement("img");
console.log(img);

Posteriormente podemos modificarlo para hacerlo más completo.

// Posteriormente podemos modificarlo
img.src = "https://picsum.photos/200/200";
img.alt = "Imagen";
img.setAttribute("id", "imagenJS"); // Agregar un atributo al elemento
console.log(img)

Agregando el elemento

Posteriormente de crear el elemento, lo ideal seria insertarlo en nuestro html. Usando el método .appendChild(img) como argumento le pasamos el elemento creado, sin embargo, appendChild lo que hará es agregar el elemento dentro del elemento que indiquemos, asi que necesitamos seleccionar el elemento body.appendChild(img); .De esta forma ya le indicamos que dentro del elemento ingrese este nuevo elemento.

const body = document.querySelector("body"); // Seleccionar el body
body.appendChild(img); // Agregar un elemento al final del body 

Si deseamos agregar el elemento al inicio haremos lo mismo pero ahora usaremos body.prepend(img);

Eliminando el elemento

Asi como podemos crear y modificar elementos, también, podemos eliminarlos. Para ello usamos el método remove() seleccionando el elemento a eliminar.

// Podemos eliminar un elemento creado en JS o uno ya existente.
img.remove()// El img es el elemento que creamos antes. 

Modificando el HTML

En la anterior lección se vio como modificar elementos, sin embargo, existe una forma más de modificar/crear un elemento(s), pudiendo remplazar el elemento interno. Para ello usaremos .innerHTML = `<h1>Manipulando DOM</h1>` e igualándolo al elemento u elementos. Una recomendación es usar "template literals" esto: `` en lugar de las comas ya que asi podremos escribir el o los elementos con espacios.

<!--HTML-->
<div id="changeDiv">Hola Mundo<div/>

const changeDiv = document.querySelector("#changeDiv");
changeDiv.innerHTML = `<h1>Manipulando DOM</h1>`

También podemos aplicar trucos para crear elementos de forma más cómoda usando los conocimientos previos.

const newDiv = document.createElement("div"); // Creamos el elemento
// Modificamos el elemento interno
newDiv.innerHTML = `<h1> Manipulando el <span style="color: #ff7000"> DOM </span> </h1>`
body.prepend(newDiv) // Agregar un elemento al inicio del body