вставлять 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 было отсутствие поддержки браузерами. Поскольку Firefox реализует функцию InsertAdjacentHTML начиная с версии 8, он будет доступен во всех основных браузерах, включая мобильные браузеры. Если вы хотите использовать его сейчас и убедиться, что он работает в версиях Firefox ниже 8, вы можете использовать этот полифилл .