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

128

我正在尝试<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>

javascript

— 迈克尔·伯科夫斯基
source

19

那是获取body元素的一种奇怪方法……只需使用即可document.body。

— Guffa 2013年

234

使用相同的过程。您已经有了该变量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);

— 迈克尔·伯科夫斯基
source

3

走“加倍努力”是故事的寓意:-)！

也可以通过以下方式缩短最后一行：document.body.appendChild（iDiv）;

— 艾丹·哈夫

8

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

— 莫阿赞汗
source

您已经复制了Michael Berkowski

— Oliver Bayes-Shelton

3

我认为我不可能做到这一点。简单的解决方案通常具有低方差：D。

— Moazzam Khan 2015年

4

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

— 奥斯丁尼
source

3

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

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”方法复杂，这给了我很多欢迎灵活性，并且它也是一种出色的调试工具：)希望能有所帮助。

— 豪尔赫·纳吉尔（Jorge Al Najjar）
source

2

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

 }

— 用户名
source

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

— 抢

2

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

— 穆罕默德·塔哈·阿克巴尔
source

1

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

— Yo Mismo
source

0

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

— 盟国
source

0

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

— 胺_Dev
source