Creé un botón que, cuando se hace clic, crea un elemento en la lista div. En la lista div 'Total:' está codificado de forma rígida. Quiero que el total disminuya cada vez que se crea un elemento para que el elemento ocupe su lugar y el total se pueda mostrar en la parte inferior. Pero el total del problema permanecerá en su lugar y el elemento se creará debajo. ¿Cómo puedo evitar que eso suceda?
Aquí está el código (prueba):
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>Puede usar insertBefore en lugar de appendChild (o prepend como sugiere Titus en los comentarios). insertBefore en mi ejemplo.
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 "anteponer" en lugar de "agregar niño", ya que "anteponer" se insertará antes del elemento, pero agregar se insertará después.
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>