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:

• Algunos trucos útiles disponibles en HTML5
• Cómo hice que un sitio web basado en CMS funcionara sin conexión
• La guía completa de aplicaciones web progresivas
• La API de Fetch
• La guía Push API
• La API de mensajería de canal
• Tutorial para trabajadores de servicios
• La guía de la API de caché
• La guía de la API de notificaciones
• Sumérjase en IndexedDB
• La API de selectores: querySelector y querySelectorAll
• Cargue JavaScript de forma eficiente con diferir y asincrónico
• El modelo de objetos de documento (DOM)
• La API de almacenamiento web: almacenamiento local y almacenamiento de sesiones
• Descubra cómo funcionan las cookies HTTP
• La API de historia
• El formato de imagen WebP
• XMLHttpRequest (XHR)
• Un tutorial detallado de SVG
• ¿Qué son las URL de datos?
• Hoja de ruta para aprender la plataforma web
• CORS, intercambio de recursos de origen cruzado
• Trabajadores web
• La guía requestAnimationFrame ()
• Que es el Doctype
• Trabajar con la consola de DevTools y la API de la consola
• La API de síntesis de voz
• Cómo esperar el evento DOM Ready en JavaScript simple
• Cómo agregar una clase a un elemento DOM
• Cómo recorrer los elementos DOM de querySelectorAll
• Cómo eliminar una clase de un elemento DOM
• Cómo comprobar si un elemento DOM tiene una clase
• Cómo cambiar un valor de nodo DOM
• Cómo agregar un evento de clic a una lista de elementos DOM devueltos por querySelectorAll
• WebRTC, la API web en tiempo real
• Cómo obtener la posición de desplazamiento de un elemento en JavaScript
• Cómo reemplazar un elemento DOM
• Cómo aceptar solo imágenes en un campo de archivo de entrada
• ¿Por qué utilizar una versión de vista previa de un navegador?
• El objeto Blob
• El objeto de archivo
• El objeto FileReader
• El objeto FileList
• ArrayBuffer
• ArrayBufferView
• El objeto URL
• Matrices escritas
• El objeto DataView
• La API BroadcastChannel
• La API de Streams
• El objeto FormData
• El objeto del navegador
• Cómo utilizar la API de geolocalización
• Cómo utilizar getUserMedia ()
• Cómo utilizar la API de arrastrar y soltar
• Cómo trabajar con el desplazamiento en páginas web
• Manejo de formularios en JavaScript
• Eventos de teclado
• Eventos del mouse
• Toque eventos
• Cómo eliminar a todos los hijos de un elemento DOM
• Cómo crear un atributo HTML usando Vanilla Javascript
• ¿Cómo verificar si una casilla de verificación está marcada usando JavaScript?
• Cómo copiar al portapapeles usando JavaScript
• Cómo deshabilitar un botón usando JavaScript
• Cómo hacer que una página sea editable en el navegador
• Cómo obtener valores de cadena de consulta en JavaScript con URLSearchParams
• Cómo eliminar todo el CSS de una página a la vez
• Cómo utilizar insertAdjectedHTML
• Safari, avisa antes de salir
• Cómo agregar una imagen al DOM usando JavaScript
• Cómo restablecer un formulario
• Cómo utilizar las fuentes de Google