How to Replace DIV Content with JavaScript

document.getElementById('myDiv').innerHTML = "New DIV content";

Using the innerHTML property

The JavaScript innerHTML property allows you to get or replace the content of HTML elements. This function can be used to dynamically change the content inside a ‘div’ using a simple line of code. Let’s see this in action with an example.

document.getElementById('myDiv').innerHTML = "New DIV content";

How it works

The JavaScript innerHTML property is used to change the content of the HTML element with id ‘myDiv’. It fetches the element and replaces its content with the new text string ‘New DIV content’.

• First, ‘document.getElementById(‘myDiv’)’ is used to select the HTML element with the id ‘myDiv’.
• Then, the ‘.innerHTML’ property is accessed on this selected element. This property represents the markup of the element’s content.
• The equals sign (‘=’) is used to assign new content to this property. In this case, the new content is the string “New DIV content”.
• As a result, the content inside the ‘div’ with id ‘myDiv’ is replaced with “New DIV content”.

Using the textContent property

The textContent property in JavaScript allows us to replace the text contained within a certain HTML DIV element. We will identify our target DIV using its ID and then replace the text using this property. Below is a code sample to help you understand better.

document.getElementById("myDiv").textContent = "New text!";

How it works

The provided JavaScript code targets an HTML DIV element with an ID of “myDiv” and changes its text content to “New text!”. This is done using the textContent property, which represents the text contained within a node and all its descendants.

• Step 1: The JavaScript function document.getElementById("myDiv") is used to target the DIV element with the ID of “myDiv”.
• Step 2: The .textContent property is then used to get the text contained in this DIV element as a string.
• Step 3: This property is not just read-only; we can also set its value. By setting the value of .textContent to “New text!”, we are replacing the existing text in the DIV element with this new string.
• Step 4: As a result, the new text is displayed on the webpage in place of the original content of the targeted DIV element.

Using the createElement and appendChild methods

This procedure involves creating a new HTML element using the createElement method, populating it with content, and then replacing an existing Div element with this new element using the appendChild method. Let’s better understand this by using an example.

var oldDiv = document.getElementById("oldDiv"); // Div to be replaced
var newDiv = document.createElement("div"); // Create new Div
newDiv.innerHTML = "New content for the div"; // Add content to the new Div
oldDiv.parentNode.replaceChild(newDiv, oldDiv); // Replace old Div with new Div

How it works

The script first identifies the old div that needs to be replaced. It then creates a new div and inserts content into it. Finally, it replaces the old div with the newly created div in the DOM.

• Step 1: Using the getElementById method, we select the div that we want to replace and store it in the oldDiv variable.
• Step 2: Using the createElement method, we create a new div and store it in the newDiv variable.
• Step 3: We populate the newly created div with content by setting the innerHTML property of the newDiv variable.
• Step 4: Using the replaceChild method, we replace the old div with the new div. In this method, the new node is passed as the first argument and the node to be replaced as the second argument. This method is called on the parent node, which we access with the parentNode property of the oldDiv element.