html10.html

<!DOCTYPE html>
<html>
<head>
	<title> Hello world </title>
</head>

<body>
	<h1 id="h">Heading</h1>
	<p>This is a paragraph 1</p>
	<p>This is a paragraph 2</p>
<div>
	<h2> This is h2 </h2>
</div>
<ul id="ul">
	<li> list 1 </li>
	<li> list 2 </li>
</ul>

<button onclick="addItem()"> Click </button>


<script type="text/javascript">

	let h1 = document.getElementById('h');
		h1.onclick = function () {
			// change text to hello world
			h1.innerHTML = "Hello world"
		}

	var li = document.getElementsByTagName('li');
		
		for (i in li)
			li[i].innerHTML ="new list" + (Number(i)+1);


	var ul = document.getElementById('ul');

	addItem = () => {
	let newLi = document.createElement('li');
	newLi.innerHTML = "add new list"
	ul.appendChild(newLi)
	}

</script>

</body>
</html>