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(newNode, referenceNode)

Параметри

*newNode

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

*referenceNode

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

Return

node

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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