Jump to content

How to Replace a Child Node With a New Node in JavaScript

Linux Hint

Recommended Posts

JavaScript is a versatile programming language that allows the creation, deletion, and replacement of a node (HTML element) without changing the HTML content of a web page. The replacement process first creates the desired node, adds its text node, appends the text node to the created node, and then performs the replacement. It is useful to update the specific parent element’s child nodes with the new one from time to time as per the users’ requirements.

This guide elaborates on replacing a child node with a new node using JavaScript.

How to Replace a Child Node With a New Node Using JavaScript?

For replacing a child node with a new node using JavaScript, utilize the “replaceChild()” method. This method replaces the specified child node with the newly created one.


parentNode.replaceChild(newChild, oldChild )

This syntax works on two parameters:

  • newChild: It denotes the new node that the user wants to place at the existing child node.
  • oldChild: It specifies the existing child node that the user wants to replace with the new one.

Let’s apply the above “replaceChild()” method practically to replace the desired child node with the new node.


First, follow the stated HTML code:

<p>List of Items:</p>

<ul id="list1">






In the above code lines:

  • The “<p>” tag defines a paragraph statement.
  • The “<ul>” tag creates an unordered list having an id “list1”.
  • Within the unordered list, the specified list items are embedded using the “<li>” tag.

JavaScript Code

Next, overview of the following code:


function myFunc() {

const elem = document.createElement("li");

const text = document.createTextNode("blogs");


const list = document.getElementById("list1");

list.replaceChild(elem, list.children[3]);



According to the above code snippet:

  • The function “myFunc()” is defined.
  • In its definition, the “elem” variable utilizes the “createElement()” method to create the specified element i.e., “li” as a new node.
  • Next, the “text” variable adds the text node of the above-created new node using the “createTextNode()” method.
  • After that, the “appendChild()” method appends the new node with the text node.
  • Lastly the “list” variable uses the “getElementById()” method to access the parent node using its id “list1” and then applies the “replaceChild()” method to its specified node index to replace it with the new one.



In this output, it can be seen that upon button click, the specified index node “website” is replaced with the “blogs” as a new node.


JavaScript offers the “replaceChild()” method to replace the desired child node with the new node. This method does not affect the other child nodes of the parent element while performing this task. Prior to this process, the user requires the “createElement()” and the “createTextNode()” methods to create a new element/node alongside its text node. This guide illustrated the approach for replacing a child node with a new node using JavaScript.

View the full article

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...