3

Tenho este HTML:

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

Preciso adicionar uma nova div chamada "tudo" e dentro dela preciso que fique as div's "esquerda", "direita" e "meio". OU seja, tem que ficar assim:

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

Como faço com JavaScript?

5 Respostas 5

7

Você pode utilizar os recursos do javascript puro:

Faça assim:

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>
1

Existem várias formas de fazer isto. Segue uma forma possível que fiz rapidamente.

$('<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

Complementando as outras respostas, uma opção que não foi mencionada:

  • primeiro você precisa copiar os filhos da div.corpo para a nova div.tudo.
    Copiar o innerHTML de uma para outra, como feito em outra resposta, é uma opção (bem mais direta, aliás), mas também é possível percorrer os filhos de div.corpo acessando a propriedade childNodes e cloná-los para a nova div, usando o método cloneNode
  • e para substituir os filhos da div.corpo, pode ser usado o método replaceChildren

Ficaria assim:

// div principal
const corpo = document.querySelector('.corpo');

// criar nova div
const tudo = document.createElement('div');
tudo.setAttribute('class', 'tudo');
// copiar os filhos da div principal para a nova div
for (const child of corpo.childNodes) {
    // cloneNode(true) para deep copy (clona também os filhos, netos, etc)
    tudo.appendChild(child.cloneNode(true));
}

// substituir os filhos da div principal pela nova div
corpo.replaceChildren(tudo);

// mostra o HTML final
console.log(corpo.outerHTML);
<div class="corpo">
    <div class="esquerda"></div>
    <div class="meio"></div>
    <div class="direita"></div>
</div>


Outra forma é uma pequena variação da outra resposta: copiar o innerHTML da div principal para a nova (até aqui é igual), assim os filhos da div.corpo passam a ser filhos da div.tudo.

Depois, basta pegar o outerHTML da div.tudo e fazer com que ele seja o conteúdo da div.corpo (setando o innerHTML desta):

// div principal
const corpo = document.querySelector('.corpo');

// criar nova div
const tudo = document.createElement('div');
tudo.setAttribute('class', 'tudo');
// copiar o conteúdo da div principal para a nova div
tudo.innerHTML = corpo.innerHTML;

// e o conteúdo da div principal passa a ser a nova div
corpo.innerHTML = tudo.outerHTML;

// mostra o HTML final
console.log(corpo.outerHTML);
<div class="corpo">
    <div class="esquerda"></div>
    <div class="meio"></div>
    <div class="direita"></div>
</div>

1

Usando Jquery, já que não disse que deveria ser js puro, e ficou assim

$("button").click(function() {
  var html_corpo = '<div class="tudo">' + $(".corpo").html() + '</div>'
  $(".corpo").html(html_corpo)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="corpo">

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

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

1
  • Essa foi boa @Adell Commented 4/03/2017 às 0:10
-3

Com JS puro ficaria algo assim:

HTML

<div class="corpo">
</div>

JS

<script>
// Vamos pegar a div corpo e colocá-la dentro de uma constante para ficar mais fácil de manipular.
const corpo = document.querySelector('.corpo')

// Vamos criar os elementos que irão ficar dentro da div corpo
// Pra isso vamos criar uma constante para a div tudo, que ir´á receber as demais divs
const tudo = document.createElement('div')
// Vamos setar os atributos da div, dando uma classe e o nome "tudo" à classe com o setAttribute
tudo.setAttribute('class', 'tudo')

// Vamos repetir o que fizemos acima para os demais divs que ficarão dentro da div "tudo"
// esquerda
const esquerda = document.createElement('div')
esquerda.setAttribute('class', 'esquerda')

// meio
const meio = document.createElement('div')
meio.setAttribute('class', 'meio')

// direita
const direita = document.createElement('div')
direita.setAttribute('class', 'direita')

// Vamos adicionar a div tudo dentro da div corpo
corpo.appendChild(tudo)

// Com a div tudo dentro da div corpo, agora podemos ir adicionando as divs esquerda, meio e direita dentro da div tudo
tudo.appendChild(esquerda)
tudo.appendChild(meio)
tudo.appendChild(direita)
</script>

Tá meio grande, mas é por causa da explicação. E talvez tenha um jeito mais fácil e rápido de fazer usando JS puro. Mas está aí a minha contribuição para o mundo dev. Também estou aprendendo, então... Valeu!

2
  • O problema é que vc começa com a div.corpo vazia e vai adicionando tudo nela. Mas a pergunta parte desta div já preenchida com as outras 3 divs dentro (esquerda, meio e direita), então na verdade é para mexer nesta estrutura (ou seja, mover essas 3 divs para a div.tudo, e esta div passa a ser a única filha da div.corpo), e não criá-la do zero
    – hkotsubo
    Commented 7/02/2022 às 12:14
  • Entendi... vou ver outra forma de fazer. Commented 8/02/2022 às 21:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .