Crea e aggiungi dynamicmente

Sto cercando di creare un

dynamicmente, con un accluso

all’interno. Ho questo finora che funziona:

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

Sto solo creando problemi e aggiungendo il secondo div al primo div.

In sostanza voglio fare questo come il markup finale:

 

Usa lo stesso processo. Hai già la variabile iDiv che si riferisce ancora all’elemento originale

che hai creato. Devi solo creare un altro

e chiamare 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/

L’ordine di creazione dell’evento non deve essere come ho sopra. Puoi alternativamente aggiungere il nuovo innerDiv al div esterno prima di aggiungere entrambi al .

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

Beh, non so quanto questo sia dinamico, ma a volte questo potrebbe salvare la tua vita di debugging:

 var daString="
"; var daParent=document.getElementById("the ID of whatever your parent is goes in here"); daParent.innerHTML=daString;

“Rat javascript” Se l’ho fatto correttamente. Funziona per me direttamente quando il div e il contenuto non sono essi stessi dinamici, o puoi persino manipolare la stringa per cambiarla, anche se la manipolazione delle stringhe è complessa rispetto all’approccio “element.property = bla”, questo dà un po ‘di benvenuto flessibilità, ed è anche un ottimo strumento per il debug 🙂 Spero che aiuti.

 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++; }