Question

0

174

Views

Reposition element in the HTML DOM with JavaScript

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.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-09T02:50:11.071Z

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>

0

174

Reposition element in the HTML DOM with JavaScript

2 answers

0

0

Find remote jobs

Andres GPT