Descripción
El método insertAdjacentHTML() nos permite insertar un contenido HTML o XML dentro del árbol de elementos DOM.
Sintaxis
insertAdjacentHTML(position, text)
Parámetros
- position, es la posición relativa al elemento en la cual se añadirá el código HTML. Sus valores pueden ser:
'beforebegin'para incluir el contenido antes del elemento, solo vale si el elemento tiene un elemento padre'afterbegin', se incluye el contenido dentro del elemento, antes del primer hijo.'beforeend', se incluye el contenido dentro del elemento, después del último hijo.'afterend', en este caso se incluye el contenido después del elemento. Solo en el caso de que elemento tenga un elemento padre.
- text, la cadena HTML o XML que será insertada en el árbol DOM.
Excepciones
Cuando ejecutemos el método insertAdjacentHTML() se podrán lanzar la excepción DOMException con los valores:
NoModificationAllowedError, si estamos intentando realizar una inserción‘beforebegin’o‘afertend’y el elemento no tiene un elemento padre.SyntaxError, en el caso que el valor pasado al parámetropositionno corresponda con alguno de los valores especificados con anterioridad.
Objeto Padre
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inyectar elemento HTML</title>
</head>
<body>
<h1>Inyectar elemento HTML</h1>
<ul id="lista">
<li>Elemento</li>
</ul>
<button id="add">insertAdjacentHTML</button>
<script>
console.log("Hola");
var lista;
var boton = document.getElementById("add");
boton.addEventListener("click",function(){
lista = document.getElementById("lista");
lista.insertAdjacentHTML("beforeend","<li>Elemento</li>");
},false);
</script>
</body>
</html>