wstaw AdjacentHTML wszędzie

Jeśli chcemy wstawić treść do dokumentu HTML, można to zrobić na 3 sposoby:

  • korzystanie z metod DOM, takich jak createNode czy appendChild.
  • Korzystanie z fragmentów dokumentów
  • Jak korzystać z aplikacji innerHTML

Jeden z nich można uznać, że w przypadku kilku przypadków użycia korzystamy też z usługi document.write.

Protokół innerHTML jest ustandaryzowany w HTML5. Stosując też braterską metodę insertAdjacentHTML, która działa jak innerHTML, ale umożliwia bardziej precyzyjne określenie miejsca wstawienia treści HTML: beforeRozpocznij, afterStart, przedkońcem i afterEnd.

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

W 2008 r. John Resig napisał artykuł na temat insertAdjacentHTML, w którym napisał następujący wniosek:

Do tej pory głównym problemem z insertAdjacentHTML był brak obsługi przeglądarek. Jeśli w Firefoksie od wersji 8 implementujemy insertAdjacentHTML, będzie on dostępny we wszystkich popularnych przeglądarkach, w tym w przeglądarkach mobilnych. Jeśli chcesz go użyć i sprawdzić, czy działa w Firefoksie w wersjach starszych niż 8, możesz użyć tego polyfill.