I created a button that when clicked creates an item on the list div. In the list div 'Total:' is hard coded. I want the total to go down whenever an item is created so that the item takes its place and the total can be shown at the bottom. But the problem total will remain in its place, and the item will be created beneath it. How can I change that from happening?
Here's the code(trial):
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.appendChild(para);
}).list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div>
<p>Total: </p>
</div>
</div>
</div>You can use insertBefore instead of appendChild
(Or prepend as suggested by Titus in the comments).
I'll use insertBefore in my example.
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
const totalEl = document.getElementById('total'); // added id on the element I want to insert items before
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.insertBefore(para, totalEl);
}).list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div id="total">
<p>Total: </p>
</div>
</div>
</div>Use "prepend" instead of "appendChild", as "prepend" will insert before the element, but append will insert after.
const btn = document.querySelector(".btn");
const itemList = document.querySelector(".item-list");
btn.addEventListener('click', function(e) {
const para = document.createElement('div');
para.classList.add('item-list');
para.innerHTML = `<p class="item">Potato Chips</p>`
itemList.prepend(para);
}).list-container {
height: 500px;
width: 300px;
background-color: cadetblue;
}
header {
background-color: burlywood;
border-style: groove;
}
.btn {
margin-bottom: 20px;
}<div class="list-container">
<header>
<h4>List Time</h4>
<button class="btn">click</button>
</header>
<div class="item-list">
<div>
<p>Total: </p>
</div>
</div>
</div>