Necesito agregar los nuevos divs antes del botón "+" o, en otras palabras, quiero mover el botón a la siguiente posición (mientras se sigue viendo en la cuadrícula css) si se agrega un div.
const btnadd = document.querySelector(".btn-add"); const divcontainer = document.getElementById("div-container") let divcounter = 0; btnadd.addEventListener("click", addNew); function addNew() { if (divcounter < 10){ const newdiv = document.createElement("div"); newdiv.classList.add("div-shadow"); divcontainer.appendChild(newdiv); divcounter++; } } :root { --clr-primary: #2962ff; --clr-primary-hover: #0d47a1; --clr-gray-med: #78909c; --clr-gray-light: #cfd8dc; } * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 2em; font-family: "Open Sans", sans-serif; } .btn-add { font-size: 1.5em; border: none; align-self: stretch; align-items: center; justify-content: center; background-color: #2962ff; color: white; cursor: pointer; font-family: "Open Sans", sans-serif; font-weight: bold; border-radius: 8px; outline: none; transition: all 100ms ease-in; } .btn-add:active, .btn-add:hover { background-color: var(--clr-primary-hover); } #div-container { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); grid-template-rows: 150px 150px; justify-content: space-between; column-gap: 30px; row-gap: 30px; align-items: flex-start; } .div-shadow { display: flex; align-self: stretch; align-items: center; justify-content: center; flex-direction: column; border-radius: 8px; background-color: #232A36; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3); } <main> <div id="div-container"> <button class="btn-add">+</button> </div> </main>Los conceptos básicos están funcionando, pero ahora mi pregunta es, ¿cómo puedo agregar nuevos divs antes del botón? ¿Hay alguna opción de javascript para agregar después de cierta clase o se trata de un problema de estructura html?
Cualquier ayuda es muy apreciada.
const btnadd = document.querySelector(".btn-add"); var divcontainer = document.getElementById("div-container"); let divcounter = 0; btnadd.addEventListener("click", addNew); function addNew() { if (divcounter < 10){ const newdiv = document.createElement("div"); newdiv.classList.add("div-shadow"); divcontainer.insertBefore(newdiv,divcontainer.childNodes[0]); divcounter++; } } :root { --clr-primary: #2962ff; --clr-primary-hover: #0d47a1; --clr-gray-med: #78909c; --clr-gray-light: #cfd8dc; } * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 2em; font-family: "Open Sans", sans-serif; } .btn-add { font-size: 1.5em; border: none; align-self: stretch; align-items: center; justify-content: center; background-color: #2962ff; color: white; cursor: pointer; font-family: "Open Sans", sans-serif; font-weight: bold; border-radius: 8px; outline: none; transition: all 100ms ease-in; } .btn-add:active, .btn-add:hover { background-color: var(--clr-primary-hover); } #div-container { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); grid-template-rows: 150px 150px; justify-content: space-between; column-gap: 30px; row-gap: 30px; align-items: flex-start; } .div-shadow { display: flex; align-self: stretch; align-items: center; justify-content: center; flex-direction: column; border-radius: 8px; background-color: #232A36; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <main> <div id="div-container"> <button class="btn-add">+</button> </div> </main>Puede usar insertBefore ( https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore )
Es un método que se utilizará en el elemento contenedor principal. El primer argumento es el nodo que está agregando, y el segundo es el anterior al que desea que se inserte el nodo.
const btnadd = document.querySelector(".btn-add"); const divcontainer = document.getElementById("div-container") let divcounter = 0; btnadd.addEventListener("click", addNew); function addNew() { if (divcounter < 10){ const newdiv = document.createElement("div"); newdiv.classList.add("div-shadow"); divcontainer.insertBefore(newdiv, btnadd); divcounter++; } } :root { --clr-primary: #2962ff; --clr-primary-hover: #0d47a1; --clr-gray-med: #78909c; --clr-gray-light: #cfd8dc; } * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 2em; font-family: "Open Sans", sans-serif; } .btn-add { font-size: 1.5em; border: none; align-self: stretch; align-items: center; justify-content: center; background-color: #2962ff; color: white; cursor: pointer; font-family: "Open Sans", sans-serif; font-weight: bold; border-radius: 8px; outline: none; transition: all 100ms ease-in; } .btn-add:active, .btn-add:hover { background-color: var(--clr-primary-hover); } #div-container { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); grid-template-rows: 150px 150px; justify-content: space-between; column-gap: 30px; row-gap: 30px; align-items: flex-start; } .div-shadow { display: flex; align-self: stretch; align-items: center; justify-content: center; flex-direction: column; border-radius: 8px; background-color: #232A36; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3); } <main> <div id="div-container"> <button class="btn-add">+</button> </div> </main>