Reposition element in the HTML DOM with JavaScript

Question

I need to add the new divs before the "+" button, or in other words I want to move the button to the next position (while still being viewed in the css grid) if a div gets added.

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>

The basics are working but now my question is, how can I append new divs before the button is there any javascript option to append after a certain class or is this an html structure issue?

Any help is much appreciated.

Answer 1

You can use insertBefore (https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)

It is a method to be used on the parent container element. The first argument is the node you're appending, and the second one is the one before which you want the node to be inserted.

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>

Answer 2

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>