JavaScript Can Change HTML Content


javascript, basics of javascript

Introduction


One of many JavaScript HTML methods is getElementById().
 
This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript".
 
some of the actions that javascript can do are listed as follows,
 
  • javascript can change HTML content 
  • javascript can change the  HTML attribute values 
  • javascript can show HTML elements 
  • javascript can change HTML styles(css) 
  • javascript can hide HTML elements

Description


  • javascript can change HTML content 
<!DOCTYPE html>
<html>
<body>
 
<h2>What Can JavaScript Do?</h2>
 
<p id="demo">JavaScript can change HTML content.</p>
 
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
 
</body>
</html>
 
  • javascript can change the  HTML attribute values
​<!DOCTYPE html>
 
<html>
<body>
 
<h2>What Can JavaScript Do?</h2>
 
<p>JavaScript can change HTML attribute values.</p>
 
<p>In this case JavaScript 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>
 
on clicking the button "Turn on light " the blub gets on and on clicking "Turn off light" the bulb gets off.
 
  • javascript can show HTML elements 
​<!DOCTYPE html>
 
<html>
<body>
 
<h2>What Can JavaScript Do?</h2>
 
<p>JavaScript 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>
 
  • javascript can change HTML styles(css) 
​<!DOCTYPE html>
 
<html>
<body>
 
<h2>What Can JavaScript Do?</h2>
 
<p id="demo">JavaScript 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 JavaScript Do?</h2>
 
<p id="demo">JavaScript can hide HTML elements.</p>
 
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
 
 
</body>
</html>