<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function append()
{
var mylist=document.getElementById("mylist");
var newli=document.createElement("li");
var myname=document.getElementById("myname").value;
var mynum=document.getElementById("mynum").value;
mylist.appendChild(newli);
newli.innerHTML=`<tr><td>
${myname}
</td>
<td>
${mynum}
</td>
</tr>`;
}
function removeAll()
{
var myNode = document.getElementById("mylist");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
</script>
<style>
*{
padding:0;
margin: 0;
}
.box{
width:200px;
position: fixed;
top:0;
left:0;
border:1px solid black;
padding:20px;
margin:20px;
}
.box input, .box button{
margin-bottom: 10px;
}
#mylist{
margin-left:350px;
margin-top:10px;
display:block;
width:400px;
height:600px;
border:2px solid black;
padding:20px;
overflow: auto;
list-style-position: inside;
}
</style>
</head>
<body>
<div class="box">
Name <input id="myname" type="text">
Number <input id="mynum" type="text">
<button type="button" onclick="append()">append</button><br>
<button type="button" onclick="removeAll()">remove all </button><br>
</div>
<ul id="mylist">
</ul>
</body></html>