Question

0

179

Visualizações

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 Respostas

Responde à pergunta

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 Relatório

Responde à pergunta

Encontrar trabalhos 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

179

Reposition element in the HTML DOM with JavaScript

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT