JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById(). in this given example we find an HTML element denoted by id="mycheck", and it changes the element content using innerHTML to "Welcome to ekgurukul.com".
document.getElementById("mycheck").innerHTML = "Welcome to ekgurukul.com";
TRY THIS CODE
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="mycheck">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("mycheck").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
Changing the style of an HTML element, is a variant of changing an HTML attribute:
document.getElementById("mycheck").style.fontSize = "20px";
TRY THIS CODE
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="mycheck">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('mycheck').style.fontSize='20px'">Click Me!</button>
</body>
</html>
Showing hidden HTML elements can also be done by changing the display style:
document.getElementById("demo").style.display = "block";
TRY THIS CODE
<!DOCTYPE html>
<html>
<body>
<h2>What JavaScript Do in Programming?</h2>
<p>JavaScript can show hidden HTML elements while click button onclick event.</p>
<p id="mycheck" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('mycheck').style.display='block'">Click Me!</button>
</body>
</html>
