Перевод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.
Если вы не знали: чертов DOM очень медленный. А по мере того, как наши сайты становятся все более динамичными и AJAX-использующими, нам становиться все важнее управлять DOM древом с наименьшим ущербом в производительности. Недавно я написал статью о DocumentFragment'ах. Это разумный подход к объединению списка дочерних элементов под неким «псевдо-элементом», для дальнейшего помещения в реальный DOM элемент. Еще один замечательный метод для работы с элементами insertAdjacentHTML: это способ добавлять элементы в родительский элемент не задевая других его потомков.
JavaScript
Для примера вы получаете кусок HTML-кода в виде строки, полученной через AJAX-запрос, обычно в таком случае мы помещаем этот код в родительский элемент через свойство innerHTML:
function onSuccess(newHtml) {
parentNode.innerHTML += newHtml;
}
Проблема в данном коде заключается в том, что любые ссылки или события прикрепленные к дочерним элементам уничтожатся после изменения innerHTML родительского элемента, даже если вы просто добавляете разметку в конец родительского элемента — метод insertAdjacentHTML решает эту проблему:
function onSuccess(newHtml) {
parentList.insertAdjacentHTML('beforeend', newHtml);
}
Данный код добавляет код в конец родительского элемента не задевая других его потомков. Это гениальный способ добавления в элемент разметки без создания промежуточного родительского элемента для добавляемого кода.
Вот так мы узнали о существовании проблемы и как её избежать при помощи описанного insertAdjacentHTML. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
Автор: jojo97
