How to make the first item in the list give room for the second item and so on?

user_19185684 0
Viewed 45

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>

css html javascript
2 Answers

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>

user_14714850

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>

user_118879020
Related