动态创建 <div> 并附加 <div>答案

【问题标题】：Create <div> and append <div> dynamically动态创建 <div> 并附加 <div>
【发布时间】：2012-12-22 15:43:32
【问题描述】：

我正在尝试动态创建一个<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>

【问题讨论】：

这是获取 body 元素的一种奇怪方式...只需使用 document.body。

标签： javascript

【解决方案1】：

使用相同的过程。您已经拥有变量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/

事件创建的顺序不必像我上面所说的那样。您可以交替将新的 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);

【讨论】：

也可以缩短最后一行：document.body.appendChild(iDiv);

【解决方案2】：

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);

【讨论】：

你几乎抄袭了 Michael Berkowski
我认为我做不到。简单的解决方案通常具有低方差：D。

【解决方案3】：

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);

【讨论】：

【解决方案4】：

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);
}

【讨论】：

【解决方案5】：

好吧，我不知道这是多么动态，但有时这可能会节省您的调试时间：

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”如果我做得正确的话。当然，当 div 和内容本身不是动态的时，直接为我工作，或者你甚至可以操纵字符串来改变它，尽管字符串操纵比“element.property=bla”方法复杂，这很受欢迎灵活性，并且也是一个很棒的调试工具:) 希望它有所帮助。

【讨论】：

【解决方案6】：

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>')); 

 }

【讨论】：

可能很好地表明您使用的是 JavaScript 库，并且您的示例使用了与原始问题不同的标记。

【解决方案7】：

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]));

【讨论】：

【解决方案8】：

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);

【讨论】：

【解决方案9】：

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

【讨论】：