EN
JavaScript - replace child element
0
points
In this article, we would like to show you how to replace a child element using JavaScript.
Quick solution:
parentNode.replaceChild(newChild, oldChild);
Practical example
In this example, we present how to use replaceChild() method to replace oldChild of the parentNode with a newChild.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="container">
<div id="child-element">Example text...</div>
</div>
<script>
// get handle to element to replace
var oldChild = document.querySelector('#child-element');
// create new element
var newChild = document.createElement('div');
newChild.textContent = 'new child text...';
// get handle to the parent node
var parentNode = oldChild.parentNode;
parentNode.replaceChild(newChild, oldChild);
</script>
</body>
</html>