Pull to refresh

JavaScript метод insertAdjacentHTML и beforeend

Website development *JavaScript *
Translation
Original author: David Walsh
Перевод статьи «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. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
Tags: Javascriptajaxhtmldomweb-разработка
Hubs: Website development JavaScript
Total votes 60: ↑50 and ↓10 +40
Comments 18
Comments Comments 18