[Перевод] JavaScript метод insertAdjacentHTML и beforeend
Перевод статьи «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. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
