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

Paul Kinlan

Если мы хотим вставить контент в 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 с таким выводом:

Примечание. Реализация этого метода в браузерах значительно уменьшит объем кода, необходимого для написания достойной библиотеки JavaScript. Я с нетерпением жду того дня, когда этот метод станет более широко доступным (наряду с querySelectorAll), и мы сможем серьезно упростить код.

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