To move an element between the Order and Ready lists, we delete the element from the first list and then add it to the second.

<html>
<head>
<style>body {
background-color:Linen;
color: black;
font-family: "Verdana", sans-serif;
}
.incoming {
background-color: white;
margin: 10px 20px 10px 20px ;
border: 5px solid crimson;
}
.ready {
background-color: white;
margin: 10px 20px 10px 20px ;
border: 5px solid seagreen;
}
h3 {
margin-left: 20px;
}
img{
margin-left: 10px;
}
</style>
</head>
<body>
<img src="https://mimo.app/i/tonys-pizza-logo.png"></img>
<div class="incoming">
<h3>Orders</h3>
<ul id="orders">
<li id="margherita">2 Pizza Margherita, extra cheese</li>
</ul>
</div>
<div class="ready">
<h3>Ready</h3>
<ul id="done"></ul>
</div>
<script>
var orderList = document.getElementById("orders");
var marinara = document.createElement("li");
marinara.innerHTML = "1 Pizza Marinara";
var romana = document.createElement("li");
romana.innerHTML = "1 Pizza Romana, extra anchovies";
orderList.appendChild(marinara);
orderList.appendChild(romana);
</script>
</body>
</html>]]>