The best way to Exchange a Youngster Node With a New Node in JavaScript

JavaScript is a flexible programming language that enables the creation, deletion, and substitute of a node (HTML aspect) with out altering the HTML content material of an internet web page. The substitute course of first creates the specified node, provides its textual content node, appends the textual content node to the created node, after which performs the substitute. It’s helpful to replace the particular father or mother aspect’s baby nodes with the brand new one once in a while as per the customers’ necessities.

This information elaborates on changing a toddler node with a brand new node utilizing JavaScript.

The best way to Exchange a Youngster Node With a New Node Utilizing JavaScript?

For changing a toddler node with a brand new node utilizing JavaScript, make the most of the “replaceChild()” methodology. This methodology replaces the required baby node with the newly created one.

Syntax

This syntax works on two parameters:

• newChild: It denotes the brand new node that the consumer desires to put on the present baby node.
• oldChild: It specifies the prevailing baby node that the consumer desires to switch with the brand new one.

Let’s apply the above “replaceChild()” methodology virtually to switch the specified baby node with the brand new node.

HTML Code

First, comply with the said HTML code:

Within the above code traces:

• The “<p>” tag defines a paragraph assertion.
• The “<ul>” tag creates an unordered record having an id “list1”.
• Inside the unordered record, the required record gadgets are embedded utilizing the “<li>” tag.

JavaScript Code

Subsequent, overview of the next code:

In accordance with the above code snippet:

• The operate “myFunc()” is outlined.
• In its definition, the “elem” variable makes use of the “createElement()” methodology to create the required aspect i.e., “li” as a brand new node.
• Subsequent, the “textual content” variable provides the textual content node of the above-created new node utilizing the “createTextNode()” methodology.
• After that, the “appendChild()” methodology appends the brand new node with the textual content node.
• Lastly the “record” variable makes use of the “getElementById()” methodology to entry the father or mother node utilizing its id “list1” after which applies the “replaceChild()” methodology to its specified node index to switch it with the brand new one.

Output

On this output, it may be seen that upon button click on, the required index node “web site” is changed with the “blogs” as a brand new node.

Conclusion

JavaScript gives the “replaceChild()” methodology to switch the specified baby node with the brand new node. This methodology doesn’t have an effect on the opposite baby nodes of the father or mother aspect whereas performing this job. Previous to this course of, the consumer requires the “createElement()” and the “createTextNode()” strategies to create a brand new aspect/node alongside its textual content node. This information illustrated the method for changing a toddler node with a brand new node utilizing JavaScript.