Нативні еквіваленти jQuery методів – Частина 4: Створення, вставка, переміщення та видалення елементів

Це четверта частина постів, присвячена нативним еквівалентам jQuery методів. Ви можете почитати Частина 1: Вибір DOM елементів, Частина 2: Робота з атрибутами та властивостями і Частина 3: Обробники подій перш ніж продовжити.

У цій статті ми розглянемо способи створення, вставки, переміщення та видалення елементів. І хоча jQuery вже містить багато корисних методів, ви будете здивовані, коли дізнаєтеся, що все це можна легко зробити використовуючи рідні методи.

Маніпуляції з HTML-кодом елементів

jQuery

// get
var html = $(elem).html();

// set
$(elem).html('<div>New html</div>');

Нативний JS

// get
var html = elem.innerHTML;

// set
elem.innerHTML = '<div>New html</div>';

Маніпуляції з текстом елементів

jQuery

// get
var text = $(elem).text();

// set
$(elem).text('New text');

Нативний JS

// get
var text = elem.textContent;

// set
elem.textContent = 'New text';

Створення елемента

jQuery

$('<div></div>');

Нативний JS

document.createElement('div');

Додає вміст у кінець елементів

jQuery

$(parentNode).append(newNode);

Нативний JS

parentNode.appendChild(newNode);

Додає вміст до початку елементів

jQuery

$(referenceNode).prepend(newNode);

Нативний JS

referenceNode.insertBefore(newNode, referenceNode.firstElementChild);
// or
referenceNode.insertAdjacentElement('afterbegin', newNode); // FF 48.0+, IE8+

Вставити безпосередньо перед елементом Insert directly before an Element

jQuery

$(referenceNode).before(newNode);

Нативний JS

referenceNode.parentNode.insertBefore(newNode, referenceNode);
// or
referenceNode.insertAdjacentElement('beforebegin', newNode); // FF 48.0+, IE8+

Вставити безпосередньо після елемента Insert directly after an Element

jQuery

$(referenceNode).after(newNode);

Нативний JS

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild);
// or
referenceNode.insertAdjacentElement('afterend', newNode); // FF 48.0+, IE8+

Примітка: ‘beforebegin’ та ‘afterend’ будуть працювати лише тоді, коли referenceNode знаходиться в DOM дереві та має батьківський елемент.

Подивіться на наступне:

referenceNode.insertAdjacentElement(position, node);

Метод insertAdjacentElement приймає два параметри:

• position – позиція відносно referenceNode, має бути однією з наступних:
  • ‘beforebegin’ – Перед самим елементом.
  • ‘afterbegin’ – Всередині елемента перед першим нащадком.
  • ‘beforeend’ – Всередині елемента, після останнього нащадка.
  • ‘afterend’ – Після самого елемента.
• node – вузол для вставки

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  Text Content
  <!-- beforeend -->
</div>
<!-- afterend -->

Приклад:

<div id="elem1">Some Text</div>
<div id="elem2">Some Text</div>

var elem1 = document.getElementById('elem1');
var elem2 = document.getElementById('elem2');

elem1.insertAdjacentElement('beforeend', elem2);

// result
<div id="elem1">Some Text<div id="elem2">Some Text</div></div>

Метод insertAdjacentElement більш зрозумілий та інтуїтивний ніж insertBefore метод, але останній краще підтримується у старих браузерах.

Додатково прочитати: appendChild, insertBefore, insertAdjacentElement

Багаторазове додавання елементів

Варто також зазначити, що додавання елемента до вузла, який знаходиться в DOM дереві, приведе до перемальовки. Це не дуже добре, тому що браузер повинен перерахувати розміри та положення нового елемента, що так само призведе до змін нащадків елемента, предків та елементів, які з’являться після нього у DOM. Якщо ви додаєте багато елементів у DOM, це може зайняти деякий час.

Щоб цього уникнути, ви можете зробити додавання з DocumentFragment. Фрагмент документа є об’єктом document, який існує тільки в пам’яті, тому додавання до нього не викликатиме жодних перекомпонувань.

Допустимо, нам потрібно додати 100 елементів li до ul елементу, який є у DOM дереві:

// Get the element that will contain our items
var ul = document.querySelector('ul');

// make 100 list elements
for ( var i = 1; i < 100; i++ ) {
  var li = document.createElement('li');

  // append the new list element to the ul element
  ul.appendChild(li);
}

У наведеному вище прикладі li елементи додаються безпосередньо до ul елементу, який знаходиться в DOM дереві, отже, призведе до перемальовування на кожній ітерації – це 100 змін!

Давайте знайдемо найкращий спосіб.

// Get the element that will contain our items
var ul = document.querySelector('ul');

// create a document fragment to append the list elements to
var docFrag = document.createDocumentFragment();

// make 100 list elements
for ( var i = 1; i < 100; i++ ) {
  var li = document.createElement('li');

  // append the new list element to the fragment
  docFrag.appendChild(li);
}

// append the fragment to the ul element
ul.appendChild(docFrag);

У цьому прикладі елементи li додаються до фрагмента документа в пам’яті, так що перекомпоновка спрацює, коли фрагмент додасться до елемента ul. Цей спосіб зменшить кількість перемалювань від 100 до 1.

Видалення елемента

jQuery

$(referenceNode).remove();

Нативний JS

referenceNode.parentNode.removeChild(referenceNode);
// or
referenceNode.remove(); // FF 23.0+, 23.0+, Edge (No IE support)

Додатково прочитати: removeChild, remove

На цьому все. Далі ми розглядатимемо нативні альтернативи $.post(), $.get(), $.ajax(), $.getJSON(), і т.д.