Advertisement
Google Ad Slot: content-top
What Can You Do
1. Modify HTML Content Dynamically
JavaScript can change or update the content of HTML elements after the page has been loaded.
Example
<!DOCTYPE html>
<html>
<head>
<title>Can Change Html Content</title>
</head>
<body>
<p id="myText">Original Text</p>
<button onclick="document.getElementById('myText').innerHTML = 'Updated Text!'">Change Text</button>
<script>
document.getElementById("myText").innerHTML = "New Text!";
</script>
</body>
</html>
2. Can change html attribute values
JavaScript can change or update the attributes of HTML elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function modify() {
// Update style attribute of element "heading"
let heading = document.getElementById("heading");
heading.setAttribute("style", "color:green");
}
</script>
</head>
<body>
<h1 id="heading">
WhereisStuff
</h1>
<button onclick="modify()">
Click to modify
</button>
</body>
</html>
3. Style Manipulation (CSS Styling)
JavaScript can dynamically change the style of HTML elements by modifying CSS properties.
Example
<!DOCTYPE html>
<html>
<head>
<title>Can Change CSS Property</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<div id="myElement" class="box">Click me</div>
<button onclick="document.getElementById('myElement').classList.toggle('highlight')">Toggle Highlight</button>
<script>
document.getElementById("myElement").style.color = "blue";
</script>
</body>
</html>
4. Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style
Example
<!DOCTYPE html>
<html>
<title>Can Hide Html</title>
<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>
5. Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style
Example
<!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>