<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li id="food">Coffee</li><li>Tea</li><li>Milk</li></ul>
<p>Click the button to replace the first item in the the list.</p>
<button onclick="myFunction()">Change the first food</button>
<button onclick="Input()">Appearances</button>
<div id="x"></div>
<script>
function myFunction() {
var textnode = document.createTextNode("Water");
var item = document.getElementById("myList").childNodes[0];
item.replaceChild(textnode, item.childNodes[0]);
}
</script>
<script>
function Input() {
let name = document.getElementById('food').value;
let uff = 'uff';
var img = document.createElement("img");
img.src = "http://www.studiobalisticolopez.net/wp-content/uploads/2011/10/cannone.gif";
var src = document.getElementById("x");
if(name =='Water'){
src.appendChild(img);
}else{
document.write(uff);
}
}
</script>
</body>
</html>