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> 

 

Recents
Enable and Disable Constraints
Resetting Identity Column Value
Format function in sqlserver
introduction to CSS
Society act 1961
Conventions in Entity Framework Core
Bootstrap Get Started
What is HTML?
working with Sqlite database in xamarian
JavaScript Can Change HTML Content
what is an object
Difference between Xamarian and Xamarian.forms
Prerequisites for App Developement
Exploring Solution Explorer
Introduction to XAML
Basic Rules
What is Economic Moat?
What is Code-First?:
logo
To Place Your adv Contact

Ph - 9876543210