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

Question

I want to make the following change of position, 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 intend to select the last div [div-3] and move to before the first div [div-1], and in another context do the opposite move, move the first to after the last.

Answer 1

You can do it using the method insertBefore to move to the beginning.

Already to move to the end I used the karim79 Excellent Response insertAfter function

I kept your original HTML markup, just included a text for viewing the example working.

See example using Pure Javascript (no 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>


<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/>
<input type="button" value="Contexto 2: A primeira vai para o último lugar" id="btn2">