Если вы не знали: чертов 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
. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
ссылка на оригинал статьи http://habrahabr.ru/post/235333/
Добавить комментарий