Page 332 - Webapplication11_C11_Flipbook
P. 332
<!DOCTYPE html>
<html >
<head>
<title>DOM Interaction Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<button id="changeText">Change Text</button>
<button id="addDiv">Add Div</button>
<div id="container"></div>
<script>
// Change text content
document.getElementById('changeText').addEventListener('click', function()
{
document.getElementById('title').textContent = Hello Touchpad';
});
// Add a new div
document.getElementById('addDiv').addEventListener('click', function() {
const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.getElementById('container').appendChild(newDiv);
});
</script>
</body>
</html>
When you click on the Change Text button the text of the web page changes from Hello, World! To Hello Touchpad.
330 Touchpad Web Applications-XI

