вставлять AdjacentHTML везде

Если мы хотим вставить контент в HTML-документ, у нас есть три способа сделать это:

  • Использование методов DOM, таких как createNode и appendChild
  • Использование фрагментов документа
  • Использование innerHTML

Можно утверждать, что у нас также есть document.write для нескольких случаев использования.

innerHTML был стандартизирован в HTML5, а вместе с ним и родственный ему метод insertAdjacentHTML , который работает как innerHTML но позволяет нам более конкретно определять, куда мы хотим вставить HTML-контент: beforeBegin, afterBegin, beforeEnd и afterEnd.

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

Еще в 2008 году Джон Резиг написал статью о insertAdjacentHTML, в которой пришел к следующему выводу:

До сих пор основной проблемой insertAdjacentHTML была его недостаточная поддержка браузерами. С реализацией insertAdjacentHTML в Firefox версии 8 он будет доступен во всех основных браузерах, включая мобильные. Если вы хотите использовать его сейчас и убедиться, что он работает в версиях Firefox ниже 8, вы можете использовать этот полифил .