Нативные эквиваленты 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(), и т.д.