创建< div>并附加< div>动态 [英] Create <div> and append <div> dynamically
问题描述
我正在尝试动态创建< div> ，其中附加了< div> 。到目前为止我有这个工作：
I am trying to create a <div> dynamically, with an appended <div> inside. I have this so far which works:
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
我在创建第二个div并将第二个div附加到第一个div时遇到了麻烦。
I am just having trouble creating and appending the second div to the first div.
我基本上希望将此作为最终加价：
I essentially want to do this as the final markup:
<div id="block" class="block">
<div class="block-2"></div>
</div>
推荐答案
使用相同的流程。你已经有变量 iDiv ，它仍然引用原始元素< div id ='block'> 你已经创造了。您只需创建另一个< div> 并调用 appendChild（）。
Use the same process. You already have the variable iDiv which still refers to the original element <div id='block'> you've created. You just need to create another <div> and call 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);
事件创建的顺序不一定如上所述。您可以将新的 innerDiv 附加到外部div，然后再将它们添加到< body> 。
The order of event creation doesn't have to be as I have it above. You can alternately append the new innerDiv to the outer div before you add both to the <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);
这篇关于创建< div>并附加< div>动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
