Метод replaceChild() элемента HTML DOM Element

Определение и использование

replaceChild() Метод заменяет подузел новым узлом.

См. также:

Метод removeChild()

Метод remove()

Метод appendChild()

Метод insertBefore()

Атрибут childNodes

Атрибут firstChild

Атрибут lastChild

Атрибут firstElementChild

Атрибут lastElementChild

Связанные методы документации:

Метод createElement()

Метод createTextNode()

Пример

Пример 1

Замените текстовый узел в элементе <li> новым текстовым узлом:

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

До замены:

  • Coffee
  • Tea
  • Milk

После замены:

  • Water
  • Tea
  • Milk

Попробуйте сами

Пример 2

Заменить <li> элемент новым <li> элементом:

// Создать новый <li> элемент:
const element = document.createElement("li");
// Создать новый текстовый узел:
const textNode = document.createTextNode("Water");
// Добавить текстовый узел к элементу <li>:
element.appendChild(textNode);
// Получить элемент <ul> с id="myList":
const list = document.getElementById("myList");
// Заменить первый подузел новым <li> элементом:
list.replaceChild(element, list.childNodes[0]);

До замены:

  • Coffee
  • Tea
  • Milk

После замены:

  • Water
  • Tea
  • Milk

Попробуйте сами

Синтаксис

node.replaceChild(newnode, oldnode)

Параметры

Параметры Описание
newnode Обязателен. Узел, который нужно вставить.
oldnode Обязателен. Узел, который нужно удалить.

Возвратное значение

Тип Описание
Объект Node Удаленный узел.

Поддержка браузеров

Метод replaceChild() элемента Это функция DOM Level 1 (1998).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка