Si queremos insertar contenido en un documento HTML, tenemos tres formas de hacerlo:
- Usar métodos DOM como
createNodeyappendChild - Cómo utilizar fragmentos de documentos
- Usa
innerHTML
Se podría decir que también tenemos document.write para pocos casos de uso.
innerHTML se estandarizó en HTML5 y, con él, es un método secundario insertAdjacentHTML que funciona como innerHTML, pero nos permite definir de manera más específica dónde queremos insertar el contenido HTML: antes de comenzar, después de comenzar, antes de terminar y después de terminar.
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 insertAAdyaHTML con la siguiente conclusión:
Hasta ahora, el principal problema con insertAAdjuntoHTML era la falta de compatibilidad con el navegador. Con la implementación de insertAAttachHTML a partir de la versión 8 de Firefox, estará disponible en todos los navegadores principales, incluidos los navegadores para dispositivos móviles. Si quieres usarlo ahora y asegurarte de que funcione en las versiones de Firefox anteriores a la 8, puedes usar este polyfill.