Changing the text of a div element using JavaScript is not difficult, but it can not be easy with beginners. We will guide you to deal with this problem. There are several ways that it is possible to change the text of a div element in JavaScript. Let’s learn about it with the explanation and examples below.
Change The Text Of A Div Element in JavaScript
Solution 1: Using the textContent Property in JavaScript.
The textContent method can set the specified text content of the specified node.
Syntax
document.getElementById(Name).textContent = new content
Parameters
- Name: The name of the Id you want to get the element to change.
- new content: The content you want to replace with.
Return Value: An object.
Look at the example below to know how to use it.
<!DOCTYPE html>
<html>
<head>
<title>How To Change The Text Of A Div Element Using JavaScript</title>
<h1>
How To Change The Text Of A Div Element Using JavaScript.
</h1>
<h2> Solution 1: Using the textContent Property in JavaScript</h2>
</head>
<body>
<span id="ID"> I am Learn To Share IT. </span>
<script type="text/javascript">
// change the text of a div element using JavaScript.
document.getElementById("ID").textContent="I am crvt4722.";
</script>
</body>
</html>Output
Solution 2: Using the innerHTML property.
The innerHTML method can set the HTML content of an specified element.
Syntax
document.getElementById(Name).innerHTML = new content
Parameters
- Name: The name of the Id you want to get the element to change.
- new content: The content you want to replace with.
Return Value: An object.
Look at the example below to know how to use it.
<!DOCTYPE html>
<html>
<head>
<title>How To Change The Text Of A Div Element Using JavaScript</title>
<h1>
How To Change The Text Of A Div Element Using JavaScript.
</h1>
<h2> Solution 1: Using the textContent Property in JavaScript</h2>
</head>
<body>
<span id="ID"> I am Learn To Share IT. </span>
<script type="text/javascript">
// change the text of a div element using JavaScript.
document.getElementById("ID").innerHTML="I am crvt4722.";
</script>
</body>
</html>Output
Solution 3: With a click
Look at this function in the example below to know about this solution.
<!DOCTYPE html>
<html>
<body>
<h1>How To Change The Text Of A Div Element Using JavaScript. </h1>
<h2>Solution 3: With a click</h2>
<p id="ID">I am Learn To Share IT.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("ID").innerHTML = "I am crvt4722.";
}
</script>
</body>
</html> Output
Then, click on “Try it”, you will see this result.
Summary
These are some solutions that can help you change the text of a div element using JavaScript. To solve this problem, you can use the textContent property, the innerHTML property, or by clicking. Choose the solution that is the most suitable for you. We hope this tutorial is helpful to you. Have an exciting learning experience. Thanks!
Maybe you are interested:
- Get the last element of an array in javascript
- Loop through all DOM elements using JavaScript
- Get Child Element by Class using JavaScript
My name is Thomas Valen. As a software developer, I am well-versed in programming languages. Don’t worry if you’re having trouble with the C, C++, Java, Python, JavaScript, or R programming languages. I’m here to assist you!
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Java, Python, JavaScript, R
