PHELOX provides you with a comprehensive and free JavaScript training system with operational examples, from beginner to professional.
Java Script Can Change HTML Content
One of many JavaScript HTML methods is
getElementById().The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":
Example 1:
document.getElementById("demo").innerHTML = "Hello JavaScript";JavaScript accepts both double and single quotes:
Example 2:
document.getElementById('demo').innerHTML = 'Hello JavaScript';JavaScript Can Change HTML Attribute Values
In this example JavaScript changes the value of the
src (source) attribute of an <img> tag:
Download Codes:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="width:100%;text-align:center">
<img id="_lightblb" src="https://cdn.phelox.com/assets/uploads/pic_bulboff.gif"><br><br>
<input onclick="document.getElementById('_lightblb').src='https://cdn.phelox.com/assets/uploads/pic_bulbon.gif';" type="button" value="Turn on the light">
<input onclick="document.getElementById('_lightblb').src='https://cdn.phelox.com/assets/uploads/pic_bulboff.gif';" type="button" value="Turn off th light">
</div>
</body>
</html>