How to change the position of an html element with javascript?

Question

How to change the position of an html element with javascript?

Navigation

#1 by (1 votes)

1

I want to make the following position change, I have a div and inside it other div's for example:

<div class="div-principal">
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
</div>

I want to select the last div [div-3] and move to before the first div [div-1], and in another context to do the opposite move, move the first to after the last one.

javascript jquery html5 slideshow

asked by anonymous 31.08.2016 / 22:34

1 answer

Date with problem in mysql and java dialog with problem when using --item-help

score 1 · Accepted Answer

You can do this by using the insertBefore method to move to the beginning.

Now to move to the end I used the function insertAfter the excellent response from karim79

I kept your original HTML markup, just include a text for the example view working.

See example using pure JavaScript (without jQuery) :

var principal = document.getElementsByClassName("div-principal")[0]; // div principal
var lista = principal.getElementsByTagName("div"); // pega os itens da lista
    

document.getElementById('btn1').addEventListener('click', function() {
    principal.insertBefore( lista[(lista.length - 1)],lista[0] ); // move a última para antes da primeira 
});


document.getElementById('btn2').addEventListener('click', function() {
       
    insertAfter( lista[0],lista[(lista.length - 1)] ); // move a primeira para depois da última
});


// função extraída de: https://stackoverflow.com/a/4793630/4921014
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

.div-principal div{
      border:1px solid red;
      padding:5px;
      margin:5px;
 }

 <div class="div-principal">
        <div class="div-1">div1</div>
        <div class="div-2">div2</div>
        <div class="div-3">div3</div>
</div>

<br/>

<input type="button" value="Contexto 1: A última vai para o primeiro lugar" id="btn1">

<br/><br/>

<input type="button" value="Contexto 2: A primeira vai para o último lugar" id="btn2">

Bonus: See example using jQuery :

$('#btn1').click(function(){
    var conteudo_mover = $('.div-principal div:last-of-type'); // copia o conteudo da última
    $('.div-principal div:last-of-type').remove(); // remove a última
    $(conteudo_mover).insertBefore('.div-principal div:first-of-type'); // insere antes da primeira
});



$('#btn2').click(function(){
    var conteudo_mover = $('.div-principal div:first-of-type'); // copia o conteudo da primeira
    $('.div-principal div:first-of-type').remove(); // remove a primeira
    $(conteudo_mover).insertAfter('.div-principal div:last-of-type'); // insere depois da última
});

.div-principal div{
      border:1px solid red;
      padding:5px;
      margin:5px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="div-principal">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

<br/>
<input type="button" value="Contexto 1: A última vai para o primeiro lugar" id="btn1">
<br/>
<input type="button" value="Contexto 2: A primeira vai para o último lugar" id="btn2">