Reposition element in the HTML DOM with JavaScript

user_9212944 0
Viewed 113

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.

css html javascript
2 Answers

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>

user_108054790

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>

user_165213810
Related