Create
and append
dynamically

Question

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

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>

That's an odd way of getting the body element... just use `document.body`. — Guffa, Dec 09 '13 at 13:14

Michael Berkowski · Accepted Answer · 2012-12-22T15:53:40.153

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

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>.

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

can also shorten last line with: document.body.appendChild(iDiv); — idan hav, Oct 17 '19 at 05:43

score 12 · Answer 2 · edited Dec 22 '12 at 17:22

12

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

edited Dec 22 '12 at 17:22

Tim M.

53,671
14
120
163

answered Dec 22 '12 at 15:53

Moazzam Khan

3,130
2
20
35

you have pretty much copied Michael Berkowski – Oliver Bayes-Shelton Jun 03 '15 at 10:57
3

I don't think I could have done that. Simple solutions usually have low variance :D. – Moazzam Khan Jun 03 '15 at 13:13

score 4 · Answer 3 · answered Dec 22 '12 at 15:47

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

answered Dec 22 '12 at 15:47

austincheney

1,189
9
11

score 4 · Answer 4 · edited Dec 16 '14 at 02:45

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

edited Dec 16 '14 at 02:45

Michael Berkowski

267,341
46
444
390

answered Dec 22 '12 at 16:02

Muhammad Talha Akbar

9,952
6
38
62

score 4 · Answer 5 · answered Sep 07 '17 at 14:45

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.

score 2 · Answer 6 · edited Jul 09 '13 at 06:23

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

 }

edited Jul 09 '13 at 06:23

Ankur

5,086
19
37
62

answered Jul 09 '13 at 06:04

user2563247

21
1

might have been nice to indicate you were using a JavaScript library and that your example uses different markup than the original question. – rob Apr 20 '14 at 09:44

score 2 · Answer 7 · answered Mar 06 '14 at 09:14

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

score 0 · Answer 8 · answered Dec 22 '12 at 17:21

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

score 0 · Answer 9 · answered Apr 16 '15 at 09:27

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

Create
and append
dynamically

9 Answers9

Linked

Related

Create and append dynamically

9 Answers9

Linked

Related

Create
and append
dynamically