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() для переміщення вузлів між різними батьківськими вузлами. Це може бути зручним способом реорганізувати структуру DOM без необхідності видаляти та додавати вузли окремо.

автор: Bond правити

Порада

Якщо потрібно замінити кілька дочірніх вузлів батьківського вузла, розгляньте можливість використання методу DocumentFragment для створення тимчасового контейнера. Це може значно підвищити продуктивність порівняно з багаторазовим заміщенням окремих вузлів.

автор: Bond правити

Порада

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

автор: Bond правити

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

Синтаксис

replaceChild(newChild, oldChild)

Параметри

newChild

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

автор: Bond

правити

oldChild

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

автор: Bond

правити

Повернення

node

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1.1	7	12	6

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

Переглядач
	4.4	18	4	1

Приклади

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

<div id="oldElement">Демонстраційний елемент</div>

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

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

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

<button id="oldButton">Натисни</button>
<div id="container">Демонстраційний елемент</div>

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