insertAdjacentHTML em qualquer lugar

Paul Kinlan

Se quisermos inserir conteúdo em um documento HTML, temos três maneiras de fazer isso:

• Usar métodos do DOM, como createNode e appendChild
• Como usar fragmentos de documentos
• Como usar o innerHTML

Podemos dizer que também temos document.write para alguns casos de uso.

O innerHTML foi padronizado no HTML5 e, com ele, um método irmão insertAdjacentHTML, que funciona como innerHTML, mas permite definir mais especificamente onde queremos inserir o conteúdo HTML: beforeBegin, afterBegin, beforeEnd e afterEnd.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

Em 2008, John Resig escreveu um artigo sobre insertAdjacentHTML (em inglês) com esta conclusão:

Até agora, o principal problema com o insertAdjacentHTML era a falta de suporte a navegadores. Com a implementação do insertAdjacentHTML no Firefox a partir da versão 8, ele estará disponível em todos os principais navegadores, incluindo os dispositivos móveis. Se você quiser usá-lo agora e garantir que ele funcione em versões do Firefox anteriores à 8, use este polyfill.