Crie <div> e acrescente <div> dinamicamente

128

Estou tentando criar um <div>dinamicamente, com um anexo <div>dentro. Eu tenho isso até agora que funciona:

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

Estou apenas tendo problemas para criar e anexar a segunda div à primeira div.

Eu quero essencialmente fazer isso como a marcação final:

<div id="block" class="block">
   <div class="block-2"></div>
</div>

javascript Michael Berkowski
fonte

19

Essa é uma maneira estranha de obter o elemento body ... basta usar document.body.

Guffa

234

Use o mesmo processo. Você já possui a variável iDivque ainda se refere ao elemento original <div id='block'>que você criou. Você só precisa criar outro <div>e ligar appendChild().

// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

http://jsfiddle.net/W4Sup/1/

A ordem de criação do evento não precisa ser a mesma da acima. Como alternativa, você pode anexar o novo innerDivà div externa antes de adicionar os dois ao <body>.

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

// Create the inner div before appending to the body
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

// Then append the whole thing onto the body
document.getElementsByTagName('body')[0].appendChild(iDiv);

Michael Berkowski
fonte

3

Indo a 'milha extra' era a moral da história :-)!

também pode encurtar a última linha com: document.body.appendChild (iDiv);

Idan hav 17/10/19

8

var iDiv = document.createElement('div');

iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

var div2 = document.createElement('div');

div2.className = 'block-2';
iDiv.appendChild(div2);

Moazzam Khan
fonte

você copiou praticamente Michael Berkowski

Oliver Bayes-Shelton

3

Eu não acho que poderia ter feito isso. Soluções simples geralmente apresentam baixa variação: D.

Moazzam Khan

4

var iDiv = document.createElement('div'),
    jDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
jDiv.className = 'block-2';
iDiv.appendChild(jDiv);
document.getElementsByTagName('body')[0].appendChild(iDiv);

austincheney
fonte

3

Bem, eu não sei o quão dinâmico é isso, mas às vezes isso pode salvar sua vida de depuração:

var daString="<div id=\'block\' class=\'block\'><div class=\'block-2\'></div></div>";
var daParent=document.getElementById("the ID of whatever your parent is goes in here");
daParent.innerHTML=daString;

"Rat javascript" Se eu fiz isso corretamente. Funciona diretamente para mim quando a div e o conteúdo não são dinâmicos, é claro, ou você pode até manipular a string para mudar isso também, embora a manipulação da string seja complexa que a abordagem "element.property = bla", isso é muito bem-vindo flexibilidade e também é uma ótima ferramenta de depuração :) Espero que ajude.

Jorge Al Najjar
fonte

2

var i=0,length=2;

     for(i; i<=length;i++)
 {
  $('#footer-div'+[i]).append($('<div class="ui-footer ui-bar-b ui-footer-fixed slideup" data-theme="b" data-position="fixed" data-role="footer" role="contentinfo" ><h3 class="ui-title" role="heading" aria-level="1">Advertisement </h3></div>')); 

 }

user2563247
fonte

pode ter sido bom indicar que você estava usando uma biblioteca JavaScript e que seu exemplo usa uma marcação diferente da pergunta original.

Rob

2

window.onload = function() {
  var iDiv = document.createElement('div');
  iDiv.id = 'block';
  iDiv.className = 'block';
  document.body.appendChild(iDiv);

  var iiDiv = document.createElement('div');
  iiDiv.className = 'block-2';

  var s = document.getElementById('block');
  s.appendChild(iiDiv);
}

Muhammad Talha Akbar
fonte

1

var arrayDiv = new Array();
    for(var i=0; i <= 1; i++){
        arrayDiv[i] = document.createElement('div');
        arrayDiv[i].id = 'block' + i;
        arrayDiv[i].className = 'block' + i;
    }
    document.body.appendChild(arrayDiv[0].appendChild(arrayDiv[1]));

Yo Mismo
fonte

0

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

var iDiv2 = document.createElement('div');
iDiv2.className = "block-2";

iDiv.appendChild(iDiv2);
// Append to the document last so that the first append is more efficient.
document.body.appendChild(iDiv);

Aliado
fonte

0

    while(i<10){
               $('#Postsoutput').prepend('<div id="first'+i+'">'+i+'</div>');
               /* get the dynamic Div*/
               $('#first'+i).hide(1000);
               $('#first'+i).show(1000);
                i++;
                }

Amine_Dev
fonte

Crie <div> e acrescente <div> dinamicamente

Respostas: