insertAdjacentHTML
es 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 laafterend
cuerda.
Esto representa la posición en la que vamos a agregar el HTML al contenedor.
Tenemos 4 posiciones posibles:
beforebegin
antes del elementoafterbegin
antes de los primeros hijos del elementobeforeend
después de los últimos hijos del elementoafterend
después del elemento
Así es como agregaríamos un nuevo elemento a una lista:
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')
Descarga mi gratisManual para principiantes de JavaScript
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