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