insertAdjacentHTML em qualquer lugar

Paul Kinlan

Twitter GitHub Glitch Mastodon Página inicial

Há três maneiras de inserir conteúdo em um documento HTML:

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

É possível dizer que também temos document.write para poucos casos de uso.

O innerHTML foi padronizado em HTML5 e, com ele, um método insertAdjacentHTML irmão que funciona como innerHTML, mas nos permite definir mais especificamente onde 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 com esta conclusão:

Observação:fazer com que os navegadores implementem esse método reduzirá drasticamente a quantidade de código necessária para criar uma biblioteca JavaScript confiável. Espero que o dia em que esse método fique mais amplamente disponível, assim como o querySelectorAll, para que possamos trabalhar e simplificar o código.

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