JavaScript replaceChild() — замінити дочірній вузол

Метод replaceChild() замінює один дочірній вузол іншим і повертає замінений.

правити

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

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

Сьогодні це пишуть як old.replaceWith(new) — читається природно й кличеться на самому вузлі.

правити

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

Переглядачі

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

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

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

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

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

Приклади

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

<p id="old">Старий абзац</p>

const old = document.getElementById('old');
const fresh = document.createElement('p');
fresh.textContent = 'Новий абзац';

// НОВИЙ, потім СТАРИЙ — легко переплутати
old.parentNode.replaceChild(fresh, old);

// сучасно й без пасток
old.replaceWith(fresh);