Change HTML Content in JavaScript



Yes, it is possible to change the content of the HTML in javascript. Usually HTML content will be in HTML tags such as <p>, <span>, etc. In javascript, we have DOM methods that have an ability to access the HTML tags. Those methods, such as document.getElementById(), document.getElementByTagName(), etc., make use of tags to change the HTML content.

Example-1

In the following example, the content in the span tag is changed using a javascript DOM method document.getElementById()

Live Demo

<html>
<body>
   <span id="change">Is javaScript is java.</span>
   <input type = "button" value = "change"
   onclick='document.getElementById("change").innerHTML = "No JavaScript is not java!"'>
</body>
</html>

Once the above code is executed, we will get the following on the screen

 If we click on the above 'change' button we will get the following as output

Output

Example-2

In the following example, the content in the paragraph tag is changed using a Javascript DOM method.

Live Demo

<html>
<body>
   <p id="change">Elon musk has failed 3 times</p>
   <input type = "button" value = "change"
   onclick='document.getElementById("change").innerHTML = "Elon musk has succeded in his fourth attempt"'>
</body>
</html>

Once the above code is executed, we will get the following on the screen

 If we click on the above 'change' button we will get the following as output

Output

Updated on: 2020-06-30T08:52:32+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements