<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta title="viewport"
content material="width=gadget-width,
initial-scale=1.0" />
<title>A number of script tag</title>
<fashion>
.frequent {
width: 200px;
top: 60px;
margin: 20px;
background-color: rgba(0, 0, 255, 1);
border-radius: 15px;
font-size: massive;
coloration: white;
}
#btn1:hover {
background-color: royalblue;
}
#btn2:hover {
background-color: royalblue;
}
.createdDynamic {
show: block;
coloration: purple;
font-size: bigger;
width: 300px;
top: 100px;
margin-left: 20px;
background-color: lightgray;
}
</fashion>
</head>
<physique>
<button id="btn1" class="frequent">Say Hiya</button>
<div id="container"></div>
<script>
const btnEle = doc.getElementById("btn1");
const container = doc.getElementById("container");
// added an occasion listener on the btn1
// that may show the message
btnEle.addEventListener("click on", perform (e) {
// Right here we're creating a component to
// put the textual content message on the net web page
const createELe = doc.createElement("span");
// giving class to created span
createELe.className = "createdDynamic";
// placing the content material contained in the span
createELe.textContent =
"Hiya, This text is contributed for"+
"geeksforgeeks by Prince Kumar";
// appending span into the div component having id container
container.appendChild(createELe);
});
</script>
<button id="btn2" class="frequent">Take away</button>
<script>
const buttonEle = doc.getElementById("btn2");
// added an occasion listener on btn2 that assist us to take away
// the message from the span
buttonEle.addEventListener("click on", perform (e) {
alert("Do you actually wish to take away the message");
const getContainer = doc.getElementById("container");
if (getContainer.textContent != "") {
getContainer.textContent = "";
}
});
</script>
</physique>
</html>
