创build<div>并dynamic追加<div>

我正在试图创build一个<div>dynamic,与一个附加的<div>里面。 我有这个到目前为止工作:

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

我只是无法创build和附加第二个div到第一个div。

我基本上想把它作为最终的标记:

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

使用相同的过程。 你已经有了variablesiDiv ,它仍然是指你创build的原始元素<div id='block'> 。 你只需要创build另一个<div>并调用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/

事件创build的顺序不一定像上面那样。 在添加到<body>之前,您可以交替地将新的innerDiv添加到外部div。

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

那么,我不知道这是多么dynamic,但有时这可能会节省您的debugging生活:

 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; 

“大鼠的JavaScript”如果我做得正确。 当div和内容本身不是dynamic的,或者你甚至可以操作string来改变它,尽pipestring操作比“element.property = bla”方法更复杂,这给我一些非常的欢迎灵活性,也是一个很好的debugging工具:)希望它有帮助。