In: Computer Science
This should be done in JavaScript. The HTML file should only contain an empty main tag. All other HTML on the page should be created with JavaScript. The JavaScript file should be a separate file.
temp.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main></main>
<script src="./temp.js"></script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
temp.js
const main = document.querySelector('main');
//jokes
const joke1 = `What do you call a crying sister? A crisis`;
const joke2 = `I have a joke on black hole but it sucks`;
const joke3 = `What do we call a bee born in United States? A USB`;
//template html string
const template = `<h3>My Jokes</h3>
<ul>
<li>${joke1}</li>
<li>${joke2}</li>
<li>${joke3}</li>
</ul>`;
//set main to template
main.innerHTML = template;
//create paragraph and text node
const para = document.createElement('p');
const text = document.createTextNode("That's all folks!");
para.appendChild(text);
document.body.appendChild(para);