Create div and append div dynamically

Question

I am trying to create a  lt div gt  dynamically  with an appended  lt div gt  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    lt div id  block  class  block  gt      lt div class  block-2  gt  lt  div gt   lt  div gt

User · Answer

while i lt 10                      Postsoutput   prepend   lt div id  first  i    gt   i   lt  div gt                       get the dynamic Div                      first  i  hide 1000                      first  i  show 1000                   i

User · Answer

Use the same process  You already have the variable iDiv which still refers to the original element  lt div id  block  gt  you ve created  You just need to create another  lt div gt  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  lt body gt    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

User · Answer

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

User · Answer

Well  I don t know how dynamic this is is  but sometimes this might save your debugging life   var daString   lt div id   block   class   block   gt  lt div class   block-2   gt  lt  div gt  lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

var i 0 length 2        for i  i lt  length i             footer-div   i   append     lt div class  ui-footer ui-bar-b ui-footer-fixed slideup  data-theme  b  data-position  fixed  data-role  footer  role  contentinfo   gt  lt h3 class  ui-title  role  heading  aria-level  1  gt Advertisement  lt  h3 gt  lt  div gt

User · Answer

var arrayDiv   new Array        for var i 0  i  lt   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

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

Examples related to javascript