How to create div with javascript

Asked

Viewed 12,678 times

3

Guys, I have the following situation:

<div class="corpo">

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

</div>

I need to add a new div called "everything" and inside it I need to stay the Divs "left, right, middle". I mean, it has to look like this:

  <div class="corpo">
    <div cass="tudo">
       <div class="esquerda"></div>
       <div class="meio"></div>
       <div class="direita"></div>
    </div>
    </div>

How do I use javascript?

javascript html

3 answers

6

You can use the pure javascript features:

Do so:

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>

2


There are many ways to do this. It follows a possible shape I made 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>
<div class="corpo">

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

</div>

1

I made this jsfiddle using Jquery, since it did not say that 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)
})

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.