JS метод Element.insertBefore()

Загальний опис

insertBefore() - це метод інтерфейсу Element у JavaScript, який дозволяє вставляти вузол (node) у дерево DOM перед заданим дочірнім вузлом батьківського вузла. Цей метод є потужним інструментом для маніпулювання структурою DOM та динамічного оновлення вмісту веб-сторінки. Він широко використовується для додавання нових елементів, пересування існуючих або реорганізації ієрархії DOM.

Синтаксис методу insertBefore() виглядає наступним чином:

parentNode.insertBefore(newNode, referenceNode)

Він приймає два аргументи:

1. newNode - вузол, який потрібно вставити.
2. referenceNode - вузол, перед яким потрібно вставити новий вузол. Якщо цей аргумент дорівнює null, то newNode буде доданий в кінець списку дочірніх вузлів parentNode.

Розглянемо приклад використання insertBefore() для вставки нового елемента в DOM:

<div id="parent">
  <p>Перший абзац</p>
  <p>Другий абзац</p>
</div>

const parent = document.getElementById('parent');
const newElement = document.createElement('span');
newElement.textContent = 'Новий елемент';

// Вставляємо newElement перед другим абзацем
const secondParagraph = parent.getElementsByTagName('p')[1];
parent.insertBefore(newElement, secondParagraph);

Після виконання цього коду, структура DOM буде змінена, і новий елемент <span>Новий елемент</span> буде вставлений перед другим абзацем.

Метод insertBefore() також можна використовувати для пересування існуючих вузлів у DOM. Наприклад, якщо ви хочете помінятися місцями два абзаци з попереднього прикладу, можна зробити наступне:

const parent = document.getElementById('parent');
const firstParagraph = parent.getElementsByTagName('p')[0];
const secondParagraph = parent.getElementsByTagName('p')[1];

parent.insertBefore(secondParagraph, firstParagraph);

Після виконання цього коду, другий абзац буде переміщений перед першим.

Важливо пам'ятати, що insertBefore() не створює нових вузлів, а лише пересуває існуючі. Якщо ви хочете створити новий вузол і вставити його в DOM, спочатку потрібно створити цей вузол за допомогою методів, таких як createElement(), createTextNode() або cloneNode().

Цей метод також можна використовувати для вставки фрагментів DOM, створених за допомогою DocumentFragment. Це може бути корисним для ефективного додавання великої кількості вузлів у DOM, оскільки операції з DocumentFragment є більш оптимізованими, ніж операції з окремими вузлами.

Загалом, insertBefore() є потужним інструментом для маніпулювання DOM та динамічного оновлення вмісту веб-сторінки. Він забезпечує гнучкість та контроль над розташуванням вузлів, дозволяючи легко додавати, пересувати або реорганізовувати елементи в структурі DOM.

правити

Порада

Якщо ви хочете вставити новий вузол у кінець списку дочірніх вузлів батьківського вузла, передайте null як другий аргумент у insertBefore(). Це еквівалентно використанню методу appendChild().

const newElement = document.createElement('div');
const parentNode = document.getElementById('parent');
parentNode.insertBefore(newElement, null);

автор: Bond правити

Порада

Використовуйте insertBefore() для пересування існуючих вузлів у DOM-дереві. Якщо ви хочете змінити порядок елементів або перемістити елемент з одного місця в інше, цей метод забезпечить гнучкий спосіб досягнення цієї мети.

const parentNode = document.getElementById('parent');
const nodeToMove = parentNode.getElementsByTagName('p')[1];
const referenceNode = parentNode.firstChild;
parentNode.insertBefore(nodeToMove, referenceNode);

автор: Bond правити

Порада

Для ефективного додавання великої кількості вузлів у DOM використовуйте insertBefore() у поєднанні з DocumentFragment. Створіть DocumentFragment, додайте туди потрібні вузли, а потім вставте DocumentFragment у DOM за допомогою insertBefore(). Це оптимізує процес і зменшить кількість оновлень DOM.

const fragment = document.createDocumentFragment();
// Додаємо вузли до fragment

const parentNode = document.getElementById('parent');
parentNode.insertBefore(fragment, null);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

insertBefore(newNode, referenceNode)

Параметри

newNode

Вузол, який потрібно вставити.

автор: Bond

правити

referenceNode

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

автор: Bond

правити

Повернення

node

Повертає доданий дочірній вузол (за винятком випадку, коли newNode є DocumentFragment, у цьому випадку повертається пустий DocumentFragment).

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.1	7	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="parent">
  <p>Перший елемент</p>
  <p>Третій елемент</p>
</div>
<button onclick="insertElement()">Вставити елемент</button>

<script>
function insertElement() {
  const parent = document.getElementById('parent');
  const newElement = document.createElement('p');
  newElement.textContent = 'Другий елемент';

  // Отримуємо посилання на третій елемент
  const thirdElement = parent.children[1];

  // Вставляємо новий елемент перед третім елементом
  parent.insertBefore(newElement, thirdElement);
}
</script>

<div>
  <h3>Список елементів</h3>
  <ul id="list">
    <li>Елемент 3</li>
    <li>Елемент 1</li>
    <li>Елемент 4</li>
    <li>Елемент 2</li>
  </ul>
  <button onclick="sortList()">Сортувати список</button>
</div>

<script>
function sortList() {
  const list = document.getElementById('list');
  const items = Array.from(list.children);

  // Сортуємо елементи за їх текстовим вмістом
  items.sort((a, b) => a.textContent.localeCompare(b.textContent));

  // Очищаємо список
  list.innerHTML = '';

  // Вставляємо відсортовані елементи назад у список
  items.forEach(item => list.insertBefore(item, null));
}
</script>