Se quisermos inserir conteúdo em um documento HTML, temos três maneiras de fazer isso:
- Usar métodos do DOM, como
createNodeeappendChild - 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 insertAdjacentHTML era a falta de suporte do navegador. 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.