Cómo utilizar insertAdjectedHTML

insertAdjacentHTMLes un método DOM muy bueno al que podemos llamar a cualquier elemento DOM para agregar contenido nuevo a una página.

Es una forma agradable y flexible de insertar contenido nuevo.

El método se llama en un elemento y acepta 2 parámetros: la posición y una cadena que contiene HTML.

He aquí un ejemplo:

const item = `<div>
    test
  </div>
`

document.querySelector(’#container’).insertAdjacentHTML(‘afterend’, item)

Observe laafterendcuerda.

Esto representa la posición en la que vamos a agregar el HTML al contenedor.

Tenemos 4 posiciones posibles:

  • beforebeginantes del elemento
  • afterbeginantes de los primeros hijos del elemento
  • beforeenddespués de los últimos hijos del elemento
  • afterenddespués del elemento

Así es como agregaríamos un nuevo elemento a una lista:

document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

Más tutoriales de navegador: