JS метод Element.replaceChild()

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

Метод replaceChild() є частиною інтерфейсу Node в JavaScript, що дозволяє замінювати один дочірній вузол на інший всередині батьківського вузла. Цей метод відіграє важливу роль у маніпулюванні структурою DOM (Document Object Model) та динамічній зміні вмісту веб-сторінки. Він широко застосовується у різноманітних сценаріях, таких як оновлення вмісту, додавання або видалення елементів, а також реалізація складних інтерфейсів користувача.

Метод replaceChild() приймає два аргументи: newChild та oldChild. Аргумент newChild є вузлом, який буде вставлений замість oldChild. Аргумент oldChild є вузлом, який потрібно замінити. Обидва аргументи повинні бути екземплярами Node або одним із його похідних типів, таких як Element або Text.

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

const parent = document.querySelector('#parent');
const oldChild = document.querySelector('#oldChild');
const newChild = document.createElement('div');
newChild.textContent = 'Новий дочірній вузол';

parent.replaceChild(newChild, oldChild);

У цьому прикладі ми спочатку отримуємо посилання на батьківський вузол (parent), старий дочірній вузол (oldChild) та створюємо новий дочірній вузол (newChild). Потім ми викликаємо parent.replaceChild(newChild, oldChild), що замінює oldChild на newChild всередині parent.

Метод replaceChild() також можна використовувати для переміщення вузлів між різними батьківськими вузлами. Наприклад:

const parent1 = document.querySelector('#parent1');
const parent2 = document.querySelector('#parent2');
const child = parent1.querySelector('div');

parent2.replaceChild(child, parent2.firstChild);

У цьому прикладі ми отримуємо посилання на два батьківські вузли (parent1 та parent2), а потім вибираємо дочірній вузол div з parent1. Після цього ми викликаємо parent2.replaceChild(child, parent2.firstChild), що замінює перший дочірній вузол parent2 на child, ефективно переміщуючи child з parent1 до parent2.

Метод replaceChild() також можна використовувати у поєднанні з іншими методами DOM для створення складних маніпуляцій з вузлами. Наприклад, можна клонувати вузол за допомогою cloneNode(), змінити його вміст, а потім замінити оригінальний вузол на клон за допомогою replaceChild().

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

Метод replaceChild() є потужним інструментом для динамічної зміни структури DOM та маніпулювання вузлами. Його використання дозволяє створювати інтерактивні та адаптивні веб-додатки, що реагують на дії користувача або зміни даних.

Синтаксис

replaceChild(newChild, oldChild)

Параметри

*newChild

Новий вузол, який замінить oldChild.

*oldChild

Дочірній вузол, який потрібно замінити.

Return

node

Повертає замінений вузол. Це той самий вузол, що й oldChild.

Переглядачі

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

Приклади

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

// Створюємо новий елемент
const newElement = document.createElement('p');
newElement.textContent = 'Це новий елемент';

// Отримуємо посилання на старий елемент
const oldElement = document.getElementById('oldElement');

// Замінюємо старий елемент новим
document.body.replaceChild(newElement, oldElement);

const oldButton = document.getElementById('oldButton');
const container = document.getElementById('container');

function createNewButton() {
  const newButton = document.createElement('button');
  newButton.textContent = 'Новий елемент';
  newButton.addEventListener('click', createNewButton);
  return newButton;
}

function replaceButton() {
  const newButton = createNewButton();
  container.replaceChild(newButton, oldButton);
  oldButton = newButton;
}

oldButton.addEventListener('click', replaceButton);