Existen varias formas de insertar código HTML en una página web utilizando Javascript. La primera y más rudimentaria es utilizando el método write del document.
document.write("Titular
");
El principal problema del document.write es que insertamos el código HTML en línea directamente en el momento que lo estamos ejecutando. Esto implica que si el documento HTML ya está completo no nos será de gran utilidad.
Otra opción que tenemos es utilizar la propiedad .innerHTML sobre un elemento. Mediante la propiedad .innerHTML accedemos al contenido de texto de un elemento. Así, si tenemos una capa:
Accederemos al elemento y modificaremos su contenido:
var capa = document.getElementById("capa");
capa.innerHTML = "Contenido para la capa";
El principal inconveniente que tiene el atributo .innerHTML es que si necesitamos manipular un elemento HTML, este, al volver a ser insertado será nuevamente parseado. Imaginemos que tenemos una lista:
- Elemento
- Elemento
Y modificamos el contenido de la lista para añadir un nuevo elemento:
var lista = document.getElementById("lista");
lista.innerHTML += "Cada vez que añadimos un elemento se parsearán todos los elementos LI. Ya que son borrados y nuevamente creados.
En la especificación HTML5 aparece el método insertAdjacentHTML(). Este método ya estaba siendo utilizado por Internet Explorer, y posteriormente enviado a estandarizar. El método insertAdjacentHTML() nos permite insertar contenido HTML teniendo en cuenta los elementos HTML que existan. Así podremos utilizar «beforebegin» o antes del elemento, «afterbegin» o al inicio del elemento, «beforeend» o al final del elemento y «afterend» o después del elemento.
Así, en la lista podremos utilizar «beforeend» para insertar un nuevo elemento con insertAdjacentHTML():
var lista = document.getElementById("lista");
lista.insertAdjacentHTML("beforeend","De esta forma tenemos un mecanismo de insertar el HTML con insertAdjacentHTML() en nuestra página web de una forma más sencilla, ágil y rápida.
