American pancake in my taste

by Megi93

HTML

<button>Add bananas to pankakes</button>
<button>Add cheries to pancakes</button>
<button>Add ice cream to desert</button>
<button>Remove plasma</button>

<h3>My Desert</h3>
<ul id="desert">
    <li>
        <h4>My american pancake</h4></li>
    <li>Pancake</li>
    <li id="nutela">Nutela</li>
    <li id="plasma">Plasma biscuit</li>
    <li id="pancake">Pancake</li>
</ul>

JavaScript

// In the HTML tab we have our desert for today.
var desert = document.querySelector("#desert");
// Let's say we want to add bananas to it.
var addBananas = function() {
	var nutela = document.querySelector("#nutela");
	// First we have to create our new element and set its content
	var bananaSlice = document.createElement("li");
	// add value to bananaSlice
	bananaSlice.innerHTML = 'Banana';
	// insert to desert
	nutela.parentNode.insertBefore(bananaSlice, nutela.nextSibling);
}

var addCheries = function() {
	var pancake = document.querySelector("#pancake");
	// First we have to create our new element and set its content
	var cheries = document.createElement("li");
	// add value to cheries
	cheries.innerHTML = 'Cheries';
	pancake.parentNode.insertBefore(cheries, pancake);
}

var addIceCream = function() {
	// First we have to create our new element and set its content
	var iceCream = document.createElement("div");
	// add value to iceCream
	iceCream.innerHTML = '<li><h4>Ice cream</h4></li>';
	// After that's done, we can use appendChild to insert it.
    // This will make our fries appear at the end of the lunch list.
	desert.appendChild(iceCream);
}

var removePlasma = function() {
	//we want to get rid of those
	var plasma = document.querySelector("#plasma");
	if(plasma) {
		desert.removeChild(plasma);
	}
}

// triggers buttons
var btn = document.querySelectorAll("button");
btn[0].addEventListener("click", addBananas);
btn[1].addEventListener("click", addCheries);
btn[2].addEventListener("click", addIceCream);
btn[3].addEventListener("click", removePlasma);