Замена DOM-элемента и его содержимого на чистом JS

Допустим у вас есть следующая разметка:

<div id="greeting">
	<h1>Hello, world!</h1>
	<p>It's a lovely day in the neighborhood.</p>
</div>

А теперь представьте, что вы хотите полностью заменить элемент #greeting вот этим:

<div id="salutations">
	<h1>Hi, universe!</h1>
	<p>The sun is always shining!</p>
</div>

Как бы вы это сделали? Рассмотрим 3 возможных подхода.

Метод Node.replaceChild()

Метод Node.replaceChild() вызывается на родительском контейнере элемента, который вы хотите заменить.

Метод принимает 2 аргумента: новый элемент и текущий. Он заменяет элемент, переданный вторым аргументом на элемент, переданный первым.

Используя этот подход, вы должны сначала создать новый элемент, используя метод document.createElement(). Затем нужно задать для него все необходимые свойства и добавить контент. После этого вы можете использовать метод Node.replaceChild() для внедрения нового элемента в DOM.

See the Pen Node.replaceChild() by Kei (@RiseLab) on CodePen.dark

Метод Node.replaceChild() работает во всех современных браузерах, а также в IE9.

Метод Node.replaceWith()

Метод Node.replaceWith() более современный и призван немного облегчить процесс.

Он вызывается непосредственно на заменяемом элементе, принимая новый элемент в качестве единственного аргумента.

При этом подходе вы также должны сначала создать новый элемент, используя метод document.createElement(). Затем задать его свойства и добавить контент, после чего вызвать Node.replaceWith() для замены.

See the Pen Node.replaceWith() by Kei (@RiseLab) on CodePen.dark

Метод Node.replaceWith() работает во всех современных браузерах, но не поддерживается IE.

Свойство Element.outerHTML

Свойство Element.outerHTML существует уже давно, но я лишь недавно начал его использовать.

Оно аналогично свойству Element.innerHTML, но в отличие от него также содержит и сам элемент. Вы можете использовать его как для получения HTML-кода элемента, так и для его установки.

Используя свойство Element.innerHTML исходного элемента вы можете просто заменить его требуемой HTML-строкой.

See the Pen Element.outerHTML by Kei (@RiseLab) on CodePen.dark

Свойство Element.outerHTML работает во всех современных браузерах, а также поддерживается IE4 и выше (да да, IE4!!!).

Какой же подход использовать?

Лично я предпочитаю Element.outerHTML из-за его простоты и широкой поддержки браузерами.

Бывают ситуации, в которых использование других подходов более предпочтительно, но именно этот я использую в 99% случаев.

Источник: https://gomakethings.com/how-to-replace-an-element-and-its-content-using-vanilla-js/