css.in.ua
Підтримати

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.

Порада:

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

const parentNode = document.getElementById('parent');
const nodeToMove = parentNode.getElementsByTagName('p')[1];
const referenceNode = parentNode.firstChild;
parentNode.insertBefore(nodeToMove, referenceNode);
Порада:

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

const newElement = document.createElement('div');
const parentNode = document.getElementById('parent');
parentNode.insertBefore(newElement, null);
Порада:

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

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

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

Синтаксис

insertBefore(newNode, referenceNode)

Параметри

*newNode

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

*referenceNode

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

Return

node

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

Переглядачі

Переглядач

1

1

1.1

7

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

У цьому прикладі демонструється використання методу insertBefore() для вставки нового елемента перед існуючим елементом у батьківському вузлі.

<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>

У цьому прикладі ми побачимо більш складне використання методу insertBefore() для створення інтерактивної програми сортування списку.

Ми створюємо невпорядкований список елементів <li>. При натисканні на кнопку "Сортувати список" викликається функція sortList(), яка виконує наступні дії:

  1. Отримує посилання на батьківський вузол <ul> з id="list".
  2. Перетворює список дочірніх елементів <li> на масив за допомогою Array.from(list.children).
  3. Сортує масив елементів <li> за їх текстовим вмістом за допомогою методу sort() і функції localeCompare().
  4. Очищає вміст батьківського вузла <ul>, встановлюючи його innerHTML в порожній рядок.
  5. Вставляє відсортовані елементи <li> назад у батьківський вузол <ul> за допомогою методу insertBefore(), передаючи кожен елемент і null як другий аргумент.

<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>

Спільнота

Зв'язок