创建 < div > 并动态地追加 < div >

我试图创建一个动态的 <div>，与一个附加的 <div>内。到目前为止，我有这个工作:

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

只是在创建第二个 div 并将其追加到第一个 div 时遇到了麻烦。

我本质上想把这个作为最终的标记:

<div id="block" class="block">
<div class="block-2"></div>
</div>
499362 次浏览
小开
最佳答案

使用相同的过程。您已经有了变量 iDiv，它仍然引用您创建的原始元素 <div id='block'>。您只需要创建另一个 <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/

事件创建的顺序不必像我上面说的那样。在将两者都添加到 <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'),
jDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
jDiv.className = 'block-2';
iDiv.appendChild(jDiv);
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);
小开 
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 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>'));


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

好吧，我不知道这有多动态，但有时这可能会挽救你的调试生命:

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;

“老鼠爪哇脚本”如果我没做错的话。当然，当 div 和内容本身不是动态的，或者你甚至可以操作字符串来改变它，尽管字符串操作比“ element.property = bla”方法复杂，但是它提供了一些非常受欢迎的灵活性，也是一个非常棒的调试工具:)希望它有帮助。


提交答案