How to replace an element in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Replacing elements in the DOM allows you to swap content, update components, and create dynamic interfaces that respond to user actions and state changes.
As the creator of CoreUI with over 25 years of JavaScript experience, I use element replacement for building dynamic UI components and content management systems.
The most effective method is using the modern replaceWith() method which directly replaces elements with new content or other elements.
This provides efficient element swapping with proper event handling and maintains DOM structure integrity.
Use the replaceWith() method to replace existing elements with new content or elements in the DOM.
// Replace with new element
const oldElement = document.getElementById('oldContent')
const newElement = document.createElement('div')
newElement.textContent = 'New content here'
newElement.className = 'updated-content'
oldElement.replaceWith(newElement)
// Replace with multiple elements
const container = document.querySelector('.container')
const fragment = document.createDocumentFragment()
fragment.appendChild(document.createElement('h2'))
fragment.appendChild(document.createElement('p'))
container.replaceWith(fragment)
// Replace with HTML string
const targetElement = document.getElementById('dynamic-section')
const newContent = document.createElement('div')
newContent.innerHTML = '<h3>Updated Section</h3><p>Fresh content</p>'
targetElement.replaceWith(newContent)
// Legacy approach using replaceChild
const parent = document.getElementById('parent')
const oldChild = document.getElementById('oldChild')
const newChild = document.createElement('div')
newChild.textContent = 'Replacement content'
parent.replaceChild(newChild, oldChild)
// Replace based on condition
const statusElement = document.querySelector('.status')
const newStatus = document.createElement('span')
newStatus.className = 'status success'
newStatus.textContent = 'Operation successful'
if (statusElement.classList.contains('error')) {
statusElement.replaceWith(newStatus)
}
The replaceWith() method removes the target element and inserts the replacement in the same position. You can replace with single elements, multiple elements, or document fragments. The older replaceChild() method requires parent element access but offers broader browser support. Always ensure the new element has proper attributes and event listeners before replacement.
Best Practice Note:
This replacement pattern is used in CoreUI’s dynamic components for efficient content updates. Consider preserving important attributes and transferring event listeners when replacing elements to maintain functionality and avoid breaking user interactions.
