创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);
事件创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工具:)希望它有帮助。
