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
. Не забувайте цей метод, так як він не настільки відомий, але проте дуже корисний.
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.