You can change the text inside a DIV element in JavaScript by using the innerHTML property. The innerHTML property sets or returns the HTML content within an element.

Here’s an example of how you can change the text inside a DIV with the ID “myDiv”:

document.getElementById("myDiv").innerHTML = "New text here";

You can also use the textContent property to change the text inside a DIV, which sets or returns the text content of an element:

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

Note: textContent is slightly faster than innerHTML when you are only replacing text and not html elements, it also doesn’t run the risk of malicious code execution.

You can also use both innerHTML or textContent properties to change the text inside a DIV that you selected by classname or other selectors:

document.querySelector('.myDivClass').innerHTML = "New text here";
document.querySelectorAll('.myDivClass')[0].textContent = "New text here";

If you are working with more than one element with the same classname, you can use a for loop to change the text of all of them:

var divs = document.getElementsByClassName("myDivClass");
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = "New text here";
}

or use forEach if you are using querySelectorAll to select the elements

document.querySelectorAll('.myDivClass').forEach(el => el.innerHTML = "New text here")

Also Read:

Categorized in:

JavaScript

Tagged in:

, ,