{"id":92,"date":"2022-07-01T10:00:00","date_gmt":"2022-07-01T10:00:00","guid":{"rendered":"https:\/\/javascriptguide.com\/?p=92"},"modified":"2022-07-26T08:47:02","modified_gmt":"2022-07-26T08:47:02","slug":"node-replacechild","status":"publish","type":"post","link":"https:\/\/javascriptguide.com\/node-replacechild\/","title":{"rendered":"Node.replaceChild()"},"content":{"rendered":"

JavaScript\u2019s Node.replaceChild()<\/code> method replaces a child node within the Node<\/code>.<\/p>\n

Syntax<\/h2>\n
Node.replaceChild(newChild, oldChild);<\/code><\/pre>\n
Parameters<\/h3>\n
newChild<\/code>
\nThe Node<\/code> object to replace oldChild<\/code>.<\/p>\n
If newChild<\/code> is a reference to an existing node in the document, the method moves the node from its current position to the new position.<\/p>\n
oldChild<\/code>
\nThe Node<\/code> object to be replaced.<\/p>\n
Return value<\/h3>\n
The replaced node\u00a0(oldChild<\/code>).<\/p>\n
Exceptions<\/h3>\n
HierarchyRequestError<\/code> DOMException<\/code><\/p>\n
Thrown when the constraints of the DOM are violated (for example, when the node that replaces another node is an ancestor of the parent node, which leads to a cycle).<\/p>\n
NotFoundError DOMException<\/code><\/p>\n
Thrown if the parent of oldChild<\/code> is not the current node.<\/code><\/p>\n
Examples<\/h2>\n
Here are some examples of using the JavaScript replaceChild()<\/code> method.<\/p>\n
Suppose we have the following lists of programming languages:<\/p>\n
<ul id=\"list\">\n\u2003<li>JavaScript<\/li>\n\u2003<li>Python<\/li>\n<\/ul>\n\n<ul id=\"newList\">\n\u2003<li>C#<\/li>\n<\/ul><\/code><\/pre>\n
We would like to replace C# with JavaScript. How could we do that?<\/p>\n
One way to do that is to select the second list with the getElementById()<\/code><\/a> method, select the first li<\/code> elements of both lists, and use the replaceWith()<\/code> method:<\/p>\n
let newList = document.getElementById('newList');\nlet newChild = document.querySelector('#list li:first-child');\nlet oldChild = document.querySelector('#newList li:first-child');\nnewList.replaceChild(newChild, oldChild);<\/code><\/pre>\n
Now our HTML looks like this:<\/p>\n
\n<ul id=\"list\">\n\u2003<li>Python<\/li>\n<\/ul>\n\n<ul id=\"newList\">\n\u2003<li>JavaScript<\/li>\n<\/ul><\/code><\/pre>\n
If we only had the second list, we could replace C# with JavaScript by creating a new li<\/code> element:<\/p>\n
let newList = document.getElementById('newList');\nlet newChild = document.createElement('li');\nnewChild.textContent = 'JavaScript';\nlet oldChild = document.querySelector('#newList li:first-child');\nnewList.replaceChild(newChild, oldChild);<\/code><\/pre>\n
Browser compatibility<\/h2>\n
\n    \n      \n        \n        \n      \n        
<\/td>\n        <\/i><\/th>\n        <\/i><\/th>\n      <\/tr>\n      
<\/td>\n        \n          
Chrome<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Edge<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Firefox<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Internet Explorer<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Opera<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Safari<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Chrome (Android)<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Firefox (Android)<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Opera (Android)<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Safari (iOS)<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
Samsung Internet<\/div>\n          
<\/div>\n        <\/th>\n        
\n          
WebView (Android)<\/div>\n          
<\/div>\n        <\/th>\n      <\/td>\n    <\/thead>\n    
replaceChild()<\/code><\/th>\n        <\/i>1<\/td>\n        <\/i>12<\/td>\n        <\/i>1<\/td>\n        <\/i>6<\/td>\n        <\/i>7<\/td>\n        <\/i>1.1<\/td>\n        <\/i>18<\/td>\n        <\/i>4<\/td>\n        <\/i>10.1<\/td>\n        <\/i>1<\/td>\n        <\/i>1.0<\/td>\n        <\/i>4.4<\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table><\/div>\n
See also<\/h2>\n