How to create div with javascript

There are several ways to do this. Here's a possible way I did it quickly.

$('<div></div>').attr("class","tudo").insertBefore(".esquerda");
  $("div.esquerda").appendTo("div.tudo");
  $("div.meio").appendTo("div.tudo");
  $("div.direita").appendTo("div.tudo");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="corpo">

   <div class="esquerda">esquerda</div>
   <div class="meio">meio</div>
   <div class="direita">direita</div>

</div>

You can use pure javascript features:

• getElementsByClassName
• innerHTML
• createElement
• setAttribute
• appendChild

Do this:

HTML:

<div class="corpo">

   <div class="esquerda"></div>
   <div class="meio"></div>
   <div class="direita"></div>

</div>

Javascript

<script>

    //seleciona a classe "corpo", 
    //x será um array pois pode haver mais de uma classe
    var x = document.getElementsByClassName("corpo");

    //pega o html dentro da primeira "div" classe "corpo"
    var content = x[0].innerHTML;

    //cria um elemento "div" e seta uma classe "tudo"
    var div = document.createElement('div');
    div.setAttribute('class', 'tudo');

    //adiciona o html dentro da nova "div"
    div.innerHTML = content;

    //limpa tudo dentro da "div" classe corpo
    x[0].innerHTML = "";

    //anexa a "div" criada com o novo conteúdo 
    //dentro da "div" classe "corpo"
    x[0].appendChild(div);

</script>

I made this jsfiddle using Jquery, since I did not say it should be pure js, and it was like this

Html:

<div class="corpo">

   <div class="esquerda">esquerda</div>
   <div class="meio">meio</div>
   <div class="direita">direita</div>

</div>
<button>Add</button>

Javascript:

$( "button" ).click(function() {
    var html_corpo = '<div class="tudo">'+$(".corpo").html()+'</div>'
  $(".corpo").html(html_corpo)
})