堆栈内存溢出
  简体   繁体   English

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

[英]Create <div> and append <div> dynamically

 原文  2012-12-22 15:43:32  7   9    javascript

问题描述

I am trying to create a <div> dynamically, with an appended <div> inside. 我想动态创建一个<div> ，里面附加了<div> 。 I have this so far which works: 到目前为止我有这个工作： 

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>

9 个解决方案

解决方案1
 217 已采纳  2012-12-22 15:46:50

Use the same process. 使用相同的过程。 You already have the variable iDiv which still refers to the original element <div id='block'> you've created. 您已经拥有变量iDiv ，它仍然引用您创建的原始元素<div id='block'> 。 You just need to create another <div> and call appendChild() . 您只需要创建另一个<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/ http://jsfiddle.net/W4Sup/1/

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> . 在将两者都添加到<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);

解决方案2
 7  2012-12-22 15:53:14

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

解决方案3
 3  2012-12-22 15:47:06

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
 3  2017-09-07 14:45:02

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. “鼠标javascript”如果我做得对。 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. 当div和内容本身不是动态的时候直接为我工作，或者你甚至可以操纵字符串来改变它，虽然字符串操作比“element.property = bla”方法复杂，这给了一些非常欢迎灵活性，也是一个很好的调试工具:)希望它有所帮助。

解决方案5
 2  2012-12-22 16:02:48

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

解决方案6
 2  2013-07-09 06:04:33

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

 }

解决方案7
 1  2014-03-06 09:14:49

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
 0  2012-12-22 17:21:14

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
 0  2015-04-16 09:27:00

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何动态创建和附加到DIV？ - How to dynamically create and append to a DIV? 使用img动态创建div并将其附加到现有div - Dynamically create div with img and append it to existing div 动态创建<div>元素并在 for 循环中附加一些东西 - Dynamically create <div> element and append something in for loop 如何动态创建+插入（追加？？）一个div到一个div容器中？ - How do I dynamically create + insert (append??) a div into a div container? 动态追加div和class - Append div and class dynamically 尝试动态创建一个div并将其附加到body元素，但是不起作用？ - Trying to dynamically create a div and append it to body element but not working? 动态创建div并进入静态div - Dynamically create div and into a static div 将类追加到动态添加的div - Append class to dynamically added div 使用append（）动态添加div - Adding a div dynamically using append() 如何将按钮动态附加到div - How to append button dynamically to a div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM