Question

0

176

Vistas

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 Respuestas

Responde la pregunta

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 Denunciar

Responde la pregunta

Encuentra empleos remotos

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

176

Reposition element in the HTML DOM with JavaScript

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT