Метод Node: replaceChild()

Базовая реализация Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она поддерживается браузерами с июля 2015 года.

Метод replaceChild() интерфейса Node заменяет узел-потомка в данном (родительском) узле.

Синтаксис

replaceChild(newChild, oldChild)

Параметры

newChild: Новый узел, который заменит oldChild.

Предупреждение: Если новый узел уже существует где-то в DOM, он предварительно удаляется из этого места.
oldChild: Узел-потомок, который будет заменён.

Примечание: Порядок параметров, новый перед старый, необычен. Element.replaceWith(), который применим только к узлам-элементам, может быть легче для чтения и использования.

Возвращаемое значение

Заменённый Node. Это тот же узел, что и oldChild.

Исключения

HierarchyRequestError DOMException

Выбрасывается, когда нарушаются ограничения древовидной структуры DOM, то есть если происходит одно из следующих:

Если родитель oldChild не является Document, DocumentFragment или Element.
Если замена oldChild на newChild приведёт к циклу, то есть если newChild является предком узла.
Если newChild не является DocumentFragment, DocumentType, Element или CharacterData.
Если текущий узел является Text, а его родитель — Document.
Если текущий узел является DocumentType, а его родитель — не Document, так как doctype всегда должен быть прямым потомком document.
Если родитель узла — Document, а newChild — DocumentFragment с более чем одним Element потомком или содержащим Text потомком.
Если замена oldChild на newChild приведёт к Document с более чем одним Element в качестве потомка.
Если замена oldChild на newChild приведёт к наличию узла Element перед узлом DocumentType.

NotFoundError DOMException

Выбрасывается, если родитель oldChild не является текущим узлом.

Пример

// Given:
// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// Create an empty element node
// without an ID, any attributes, or any content
const sp1 = document.createElement("span");

// Give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// Create some content for the new element.
const sp1_content = document.createTextNode("new replacement span element.");

// Apply that content to the new element
sp1.appendChild(sp1_content);

// Build a reference to the existing node to be replaced
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// Replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

// Result:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

Спецификации

Спецификация
DOM # dom-node-replacechild

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`replaceChild`	1	12	1	7	1.1	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild