Как стать автором
Обновить

JavaScript метод insertAdjacentHTML и beforeend

Время на прочтение 1 мин
Количество просмотров 22K
Автор оригинала: 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. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
Теги:
Хабы:
+40
Комментарии 18
Комментарии Комментарии 18

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн