Crie e anexe dinamicamente

Eu estou tentando criar um

dinamicamente, com um

anexado dentro. Eu tenho isso até agora, o que funciona:

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

Estou tendo problemas para criar e append o segundo div ao primeiro div.

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

 

Use o mesmo processo. Você já tem a variável iDiv que ainda se refere ao elemento original

que você criou. Você só precisa criar outro

e chamar 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 como eu a tenho acima. Você pode append alternadamente o novo innerDiv ao div externo antes de adicionar ambos ao .

 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); 
 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); 
 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); 

Bem, eu não sei o quão dynamic isso é, mas às vezes isso pode salvar sua vida de debugging:

 var daString="
"; 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 para mim diretamente quando o div e o conteúdo não são dynamics, é claro, ou você pode até mesmo manipular a string para mudar isso também, embora a manipulação de string seja complexa do que a abordagem “element.property = bla”, isso dá algumas boas-vindas flexibilidade, e é uma ótima ferramenta de debugging também 🙂 Espero que ajude.

 var i=0,length=2; for(i; i< =length;i++) { $('#footer-div'+[i]).append($('
 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])); 
 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); } 
 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); 
  while(i<10){ $('#Postsoutput').prepend('
'+i+'
'); /* get the dynamic Div*/ $('#first'+i).hide(1000); $('#first'+i).show(1000); i++; }