Js Can Change htmlContent
One of many JS HTML methods is getElementById().
The example below finds an HTML element (with id="happy"), and changes the element content to "Happy JavaScript":
<!DOCTYPE html>
<html>
<body>
<h2>What Can JS Do?</h2>
<p id="Happy">js can change HTML content.</p>
<button type="button" onclick='document.getElementById("Happy").innerHTML = "happyJavaScript!"'>Click Me!</button>
</body>
</html>
JS Can Change HTML Attribute Values
<!DOCTYPE html>
<html>
<body>
<h2>What Can JS Do?</h2>
<p>JS can change HTML attribute values.</p>
<p>In this case JS changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
JS Can Change HTML Styles (CSS)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JS Do?</h2>
<p id="demo">JS can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
JavaScript Can Hide HTML Elements
<!DOCTYPE html>
<html>
<body>
<h2>What Can JS Do?</h2>
<p id="demo">JS can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
JavaScript Can Show HTML Elements
<!DOCTYPE html>
<html>
<body>
<h2>What Can JS Do?</h2>
<p>JS can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
