Example with insert and remove elements
Playing around with this
by Megi93
HTML
<button>Add fries to lunch</button>
<button>Add Jogurt to lunch</button>
<button>Add cheese to sandwich</button>
<button>Add ketchup to sandwich</button>
<button>Remove pickles</button>
<button>Remove mayo</button>
<h3>My Lunch</h3>
<ul id="lunch">
<li>
<h4>My sandwich</h4>
</li>
<li>Bread</li>
<li id="pickles">Pickles</li>
<li id="Beef">Beef</li>
<li id="Mayo">Mayo</li>
<li id="bread">Bread</li>
</ul>
JavaScript
var lunch = document.querySelector("#lunch");
var btn = document.querySelectorAll("button");
var addFries = function() {
var fries = document.createElement("div");
fries.innerHTML = '<li><h4>Fries</h4></li>';
//adding to lunch fries
lunch.appendChild(fries);
}
var addJoghurt = function() {
var joghurt = document.createElement("li");
joghurt.innerHTML = '<li><h4>Joghurt</h4></li>';
lunch.appendChild(joghurt);
}
var addCheese = function() {
var beef = document.querySelector("#Beef");
var topSlice = document.createElement("li");
var bottomSlice = document.createElement("li");
//adding to topSlice and bottomSlice text inside
topSlice.innerHTML = bottomSlice.innerHTML = 'Cheese';
beef.parentNode.insertBefore(topSlice, beef);
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
}
var addKetchup = function() {
var bread = document.querySelector("#bread");
var topSlice = document.createElement("li");
topSlice.innerHTML = 'Ketchup';
bread.parentNode.insertBefore(topSlice, bread);
}
var removePickles = function() {
var pickle = document.querySelector("#pickles");
if (pickle) {
pickle.parentNode.removeChild(pickle);
}
}
var removeMayo = function() {
var mayo = document.querySelector("#Mayo");
if (mayo) {
mayo.parentNode.removeChild(mayo);
}
}
btn[0].addEventListener("click", addFries);
btn[1].addEventListener("click", addJoghurt);
btn[2].addEventListener("click", addCheese);
btn[3].addEventListener("click", addKetchup);
btn[4].addEventListener("click", removePickles);
btn[5].addEventListener("click", removeMayo);