JavaScript replaceChild
last modified April 2, 2025
In this article, we explore the element.replaceChild method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to replace child elements within a parent element.
Basic Definition
The replaceChild method replaces a child node within the specified
parent node. It takes two parameters: the new node to insert and the old node
to replace.
The method returns the replaced node. If the new node already exists in the DOM, it will be moved from its current position to the new position.
Basic replaceChild Example
This example demonstrates how to replace a simple paragraph element with a new one.
<!DOCTYPE html>
<html>
<head>
<title>Basic replaceChild</title>
</head>
<body>
<div id="container">
<p id="oldPara">This is the old paragraph.</p>
</div>
<button onclick="replaceElement()">Replace Paragraph</button>
<script>
function replaceElement() {
const container = document.getElementById('container');
const oldPara = document.getElementById('oldPara');
const newPara = document.createElement('p');
newPara.textContent = 'This is the new paragraph!';
container.replaceChild(newPara, oldPara);
}
</script>
</body>
</html>
In this basic example, we have a div containing a paragraph. When the button is
clicked, the function creates a new paragraph and replaces the old one using
replaceChild.
The method requires the parent element (container) to call it, passing the new node and the old node to be replaced. The old node is removed from the DOM.
Replacing with Existing Element
This example shows how to replace an element with another existing element.
<!DOCTYPE html>
<html>
<head>
<title>Replace with Existing Element</title>
</head>
<body>
<div id="container">
<p id="para1">First paragraph</p>
<p id="para2">Second paragraph</p>
</div>
<button onclick="swapElements()">Swap Paragraphs</button>
<script>
function swapElements() {
const container = document.getElementById('container');
const para1 = document.getElementById('para1');
const para2 = document.getElementById('para2');
// Create a temporary clone of para1
const temp = para1.cloneNode(true);
// Replace para1 with para2
container.replaceChild(para2, para1);
// Replace para2 with the original para1 (from temp)
container.replaceChild(temp, para2);
}
</script>
</body>
</html>
Here we have two paragraphs inside a container. The button click swaps their
positions using replaceChild with a temporary clone.
This demonstrates that when replacing with existing elements, the original element is moved rather than copied. The temporary clone helps preserve the original content during the swap.
Replacing List Items
This example demonstrates replacing items in an unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Replacing List Items</title>
</head>
<body>
<ul id="fruitList">
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="cherry">Cherry</li>
</ul>
<button onclick="replaceFruit()">Replace Banana</button>
<script>
function replaceFruit() {
const list = document.getElementById('fruitList');
const oldItem = document.getElementById('banana');
const newItem = document.createElement('li');
newItem.textContent = 'Blueberry';
newItem.id = 'blueberry';
list.replaceChild(newItem, oldItem);
}
</script>
</body>
</html>
In this example, we have a list of fruits. Clicking the button replaces the
banana item with a new blueberry item using replaceChild.
This shows how replaceChild can be used with list structures to
dynamically update content while maintaining the overall structure.
Replacing with Event Listeners
This example shows how to replace an element while preserving event listeners.
<!DOCTYPE html>
<html>
<head>
<title>Replacing with Event Listeners</title>
</head>
<body>
<div id="container">
<button id="oldBtn">Click Me</button>
</div>
<p id="message"></p>
<button onclick="replaceButton()">Replace Button</button>
<script>
// Add event listener to original button
document.getElementById('oldBtn').addEventListener('click', function() {
document.getElementById('message').textContent = 'Old button clicked!';
});
function replaceButton() {
const container = document.getElementById('container');
const oldBtn = document.getElementById('oldBtn');
// Create new button with same functionality
const newBtn = document.createElement('button');
newBtn.textContent = 'New Button';
newBtn.id = 'newBtn';
// Add event listener to new button
newBtn.addEventListener('click', function() {
document.getElementById('message').textContent = 'New button clicked!';
});
container.replaceChild(newBtn, oldBtn);
}
</script>
</body>
</html>
Here we have a button with a click handler. The replace button creates a new
button with similar functionality and replaces the original using
replaceChild.
This demonstrates that event listeners are not automatically transferred when replacing elements. New listeners must be attached to the replacement element.
Replacing with Complex Elements
This example shows how to replace an element with a more complex structure.
<!DOCTYPE html>
<html>
<head>
<title>Replacing with Complex Elements</title>
<style>
.card {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id="content">
<div id="simpleCard" class="card">
Simple content card
</div>
</div>
<button onclick="replaceWithComplex()">Replace with Complex Card</button>
<script>
function replaceWithComplex() {
const content = document.getElementById('content');
const oldCard = document.getElementById('simpleCard');
// Create complex card element
const newCard = document.createElement('div');
newCard.className = 'card';
newCard.id = 'complexCard';
// Add complex content
newCard.innerHTML = `
<h3>Complex Card</h3>
<p>This card has multiple elements inside it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
`;
content.replaceChild(newCard, oldCard);
}
</script>
</body>
</html>
In this example, we replace a simple card with a more complex one containing
multiple nested elements using replaceChild.
This demonstrates how replaceChild can handle complex DOM structures
and how innerHTML can be used to quickly create nested elements for replacement.
Source
MDN replaceChild Documentation
In this article, we have shown how to use element.replaceChild
in JavaScript. This method is fundamental for DOM manipulation and dynamic
content updates in web development.
Author
List all JS DOM tutorials.