Node.replaceChild

Аннотация

Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.

Синтаксис

replacedNode = parentNode.replaceChild(newChild, oldChild);

• newChild элемент на который будет заменен oldChild. В случает если он уже есть в DOM, то сначала он будет удален.
• oldChild элемент который будет заменен.
• replacedNode замененный элемент. Тоже самое что и oldChild.

Пример

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

// Создаем новый пустой элемент
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// Присваиваем ему id 'newSpan'
sp1.setAttribute("id", "newSpan");

// Создаем строку.
var sp1_content = document.createTextNode("new replacement span element.");

// Добавляем контент в созданный нами узел
sp1.appendChild(sp1_content);

// создаем ссылку на существующий элемент который будем заменять
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// заменяем существующий элемент sp2 на созданный нами sp1
parentDiv.replaceChild(sp1, sp2);

// Результат:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div> 

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

• DOM Level 1 Core: replaceChild
• DOM Level 2 Core: replaceChild
• DOM Level 3 Core: replaceChild

См. также

• Node.removeChild