JavaScript insertBefore() — вставити вузол перед іншим

Метод insertBefore() вставляє вузол перед заданим дочірнім вузлом.

правити

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

Порядок аргументів контрінтуїтивний і плутається щоразу: спершу що вставляємо, потім перед чим.

Якщо другим аргументом передати null, вузол стане останнім — тобто метод перетвориться на appendChild().

Щоб вставити на початок, другим аргументом передають parent.firstChild. Сьогодні для цього є коротший prepend(), а для вставки перед конкретним елементом — element.before(), який кличеться на самому елементі й не вимагає шукати батька.

правити

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

Переглядачі

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

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

Переглядач
insertBefore	1+	1+	1+	7+	12+	9+

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

Переглядач
insertBefore	yes	yes	yes	yes

Приклади

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

<ul id="list">
    <li id="second">Другий</li>
</ul>

const list = document.getElementById('list');

const first = document.createElement('li');
first.textContent = 'Перший';

// що вставляємо, перед чим вставляємо
list.insertBefore(first, document.getElementById('second'));

// null другим аргументом = у кінець
const last = document.createElement('li');
last.textContent = 'Останній';
list.insertBefore(last, null);

// сучасні відповідники — простіші:
// list.prepend(node); node.before(інший);