Replace With In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of replace with in JavaScript, in this method we replace an old text to new text using HTML elements. We will use this method for dynamically update of a web page without causing recreation of whole element.
We achieve productive way for updating text, images, or other element using 'replaceChild()'.
Using replaceChild() method we will learn about replace of text or any other element, which is a part of Document Object Model (DOM) process.
We will be applying method to the parent node which contain child node that we want to replace.
Within the parent element the old node will be replaced by the new node by calling ‘ replaceChild(newNode, oldNode)’.
Step By Step Guide On Replace With In JavaScript :-
<!DOCTYPE html>
<html>
<head>
<title>Replace Text</title>
</head>
<body>
<div id="parent">
<p id="old_Node">This is the old content.</p>
</div>
<button onclick="replaceText()">Replace Text</button>
<script>
function replaceText() {
var parent_Element = document.getElementById('parent');
var old_Node = document.getElementById('old_Node');
var new_Text = 'This is the new content.';
var new_Node = document.createTextNode(new_Text);
parent_Element.replaceChild(new_Node, old_Node);
}
</script>
</body>
</html>
- For representing root of html document we use <html> element.
- Meta-information about the document Is contained in <head> section also specify the title using <title> element.
- For displaying the elements on the web page we use <body> section which also contain visible content of the document.
- Inside the <body> section, we defined a <div> element with the ‘id’ attribute set to the ‘parent’. For content to be replaced this will use as a container. Inside the <div>, we defined a <p> element with the ‘id’ attribute set to ‘old_Node’. The existing content that will be replaced is represent by this element.
- As a content ” Replace Text”, a <button> element is created. JavaScript function ‘replaceText()’ is set to call, when ‘onclick’ button is clicked.
- To write JavaScript code, a <script> section is included within the <body>.
- In JavaScript section the replace text function is declared, For getting DOM element with the 'id' attribute of 'parent' the document.getElementById('parent') statement is used variable 'parent_Element' is assigned by the element, representing the container where the replacement operation will take place.
- For getting DOM element with the 'id' attribute of 'old_Node' the document.getElementById('old_Node') statement is used variable 'old_Node' is assigned by the element, representing the container where the replacement operation will take place.
- "This is the new content" this value is assigned to a new variable declared as 'new_Text'. This represent the text that will replace the old content.
- Using 'document.createTextNode(new_Text)' a new Dom text node 'new_Text' is created. This creates a new text note containing the text "This is the new content".
- Performing the replacement operation, the 'replaceChild()' method is called on the 'parent_Element'. Two arguments are taken by the 'replaceChild()' method. One is ‘old_node’ which is DOM element to be get replaced by the ‘new_Node’ which have new content(text node).
- Within the 'parent_Element' the new content (new_Node) will replace the old content (old_Node) my executing the operation 'replaceChild()'. The 'replaceText()' function is called when the "Replace Text" button is clicked, and the text "This is the new content" is replaced within the <p> element.
Conclusion :-
The'replaceChild()' JavaScript method was used in this article to demonstrate how to dynamically replace information inside an HTML element.
Without in need to recreate the entire element, this method is an essential part of DOM process and allows to update the content on web page.
For providing more seamless and interactive user experience on the website we use 'replaceChild()'.
As we know 'replaceChild()' method works within the content of a parent element so we need to make sure that we have given accurate references to the parent and the child nodes we want to replace.
I hope this article on replace with in JavaScript helps you and the steps and method mentioned above easy to follow and implement.
About Anjali
