Question:1
<!DOCTYPE html>
<html>
<body>
<div id="myText">text1</div>
<script>
setTimeout(function(){
[Link]("myText").innerHTML="Hello,world!";
},2000);
</script>
</body>
</html>
Output:-
Question2:-
<!DOCTYPE html>
<html>
<body>
<div class="myDiv">text1</div>
<script>
setTimeout(function(){
[Link](".myDiv").[Link]="blue";
},5000);
</script>
</body>
</html>
Output:-
Question3:-
<!DOCTYPE html>
<html>
<body>
<div id="container">
Old Paragraph
</div>
<script>
function addParagraph(){
var newParagraph = [Link]('P');
[Link]="New Paragraph";
var container = [Link]("container");
[Link](newParagraph);
}
setTimeout(addParagraph,2000);
</script>
</body>
</html>
Output; -
Question4:-
<!DOCTYPE html>
<html>
<head>
<title>
<style>
.hidden{
display:none;
}
</style>
</title>
</head>
<body>
<div id="content">
<p> Original content here.</p>
<button id="addElementButton">Add Element</button>
</div>
<script>
[Link]('addElementButton').addEventListener('click',function() {
var newElement = [Link]('p');
[Link]='this is a newly added element.';
[Link]='newElement';
[Link]('content').appendChild(newElement);
setTimeout(function(){
var elementToRemove=[Link]('newElement');
if (elementToRemove){
[Link]();
}
},5000);
});
</script>
</body>
</html>
Output:-
After removing element: -
Question5:-
<!DOCTYPE html>
<html>
<head>
<title>button</button>
</title>
</head>
<body>
<button id="MyButton">click Me</button>
<p id="message"></p>
<script>
[Link]('MyButton').addEventListener('click',function() {
alert('Button clicked!');
[Link]('content').appendChild(newElement);
setTimeout(function(){
[Link]('message').textContent='Action performed after
timeout!';
},5000);
});
</script>
</body>
</html>
Output:-
After click: -
Question6:-
<!DOCTYPE html>
<html>
<head>
<title></button>
< </title>
</head>
<body>
<div class="hoverDiv">Hover over me</div>
<script>
[Link]('.hoverDiv').addEventListener('mouseover',function(){
[Link]='yellow';
});
</script>
</body>
</html>
Output;-
Output After change its background color: -