insertANextHTML en todas partes

Paul Kinlan

Si queremos insertar contenido en un documento HTML, tenemos tres formas de hacerlo:

• Usa métodos de DOM, como createNode y appendChild
• 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:

Nota: Si los navegadores implementan este método, se reducirá de forma significativa la cantidad de código necesaria para escribir una biblioteca de JavaScript respetable. Espero con ansias el día en que este método esté disponible de forma más amplia (junto con querySelectorAll) para que podamos ponernos manos a la obra y simplificar mucho el código.

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.