Javascript 创建 <div> 并动态附加 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14004117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create <div> and append <div> dynamically
提问by Michael Berkowski
I am trying to create a <div>dynamically, with an appended <div>inside. I have this so far which works:
我正在尝试<div>动态创建一个，并在<div>内部附加一个。到目前为止，我有这个工作：
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
I am just having trouble creating and appending the second div to the first div.
我只是在创建第二个 div 并将其附加到第一个 div 时遇到问题。
I essentially want to do this as the final markup:
我基本上想将其作为最终标记：
<div id="block" class="block">
<div class="block-2"></div>
</div>
回答by Michael Berkowski
Use the same process. You already have the variable iDivwhich still refers to the original element <div id='block'>you've created. You just need to create another <div>and call appendChild().
使用相同的过程。您已经拥有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);
The order of event creation doesn't have to be as I have it above. You can alternately append the new innerDivto the outer div before you add both to the <body>.
事件创建的顺序不必像我上面所说的那样。或者，您可以新追加innerDiv添加两到之前的外层div <body>。
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);
回答by Moazzam Khan
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);
回答by austincheney
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);
回答by Jorge Al Najjar
Well, I don't know how dynamic this is is, but sometimes this might save your debugging life:
好吧，我不知道这是多么动态，但有时这可能会节省您的调试时间：
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;
"Rat javascript" If I did it correctly. Works for me directly when the div and contents are not themselves dynamic of course, or you can even manipulate the string to change that too, though the string manipulating is complex than the "element.property=bla" approach, this gives some very welcome flexibility, and is a great debugging tool too :) Hope it helps.
“Rat javascript”如果我做对了。当然，当 div 和内容本身不是动态时，直接为我工作，或者您甚至可以操纵字符串来改变它，尽管字符串操作比“element.property=bla”方法复杂，但这非常受欢迎灵活性，也是一个很好的调试工具:) 希望它有所帮助。
回答by user2563247
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>'));
}
回答by Muhammad Talha Akbar
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);
}
回答by Yo Mismo
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]));
回答by Amine_Dev
while(i<10){
$('#Postsoutput').prepend('<div id="first'+i+'">'+i+'</div>');
/* get the dynamic Div*/
$('#first'+i).hide(1000);
$('#first'+i).show(1000);
i++;
}
回答by Ally
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);
