Si queremos insertar contenido en un documento HTML, tenemos tres formas de hacerlo:
- Usa métodos de DOM, como
createNodeyappendChild - Usa fragmentos de documentos
- Usa
innerHTML
Se podría decir que también tenemos document.write para algunos casos de uso.
innerHTML se estandarizó en HTML5 y, con él, un método hermano insertAdjacentHTML que funciona como innerHTML, pero nos permite definir de forma más específica dónde queremos insertar el contenido HTML: beforeBegin, afterBegin, beforeEnd y afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
En 2008, John Resig escribió un artículo sobre insertAdjacentHTML con esta conclusión:
Hasta ahora, el principal problema con insertAdjacentHTML era su falta de compatibilidad con los navegadores. Dado que Firefox implementa insertAdjacentHTML a partir de la versión 8, estará disponible en todos los navegadores principales, incluidos los navegadores para dispositivos móviles. Si quieres usarlo ahora y asegurarte de que funcione en versiones de Firefox anteriores a la 8, puedes usar este polyfill.