Make a div in Javascript and output it to the DOM

Question

I am having a little trouble right now creating multiple divs through javascript. This form has helped me create one. but I am trying to create 3. If anyone could help that would be great. I looked on one form How can I create and style a div using JavaScript? and was able to create one div. But I cannot figure out out to create multiple divs that are calling from an HTML div ID.

window.onload = function() {

  var div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "300px";
  div.style.background = "#FF0000";
  div.innerHTML = "Going";

  document.getElementById("one").appendChild(div);


  var two = document.createElement("two");
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.background = "#FF0000";
  div.innerHTML = "To Do";

  document.getElementById("two").appendChild(two);

  var three = document.createElement("three");
  div.style.width = "300px";
  div.style.height = "100px";
  div.style.background = "#0000FF";
  div.innerHTML = "Great";

  document.getElementById("three").appendChild(three);
};

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Answer 1

As you can see in the picture below. Your code creates tags <two></two> and <tree></tree>, which is not valid html tags.

To solve this problem, just pass div instead of two and three into document.createElement() function. Like so:

var two = document.createElement("div");
... element styling here ...
two.style.width = "200px";
two.style.height = "200px";
...

var three = document.createElement("div");
... element styling here ...
three.style.width = "200px";
three.style.height = "200px";
...

Answer 2

Write your javascript something like this

window.onload = function() {

    var div1 = document.createElement("div");
    div1.style.width = "100px";
    div1.style.height = "300px";
    div1.style.background = "#FF0000";
    div1.innerHTML = "Going";

    document.getElementById("one").appendChild(div1);


    var div2 = document.createElement("div");
    div2.style.width = "200px";
    div2.style.height = "200px";
    div2.style.background = "#FF0000";
    div2.innerHTML = "To Do";

    document.getElementById("two").appendChild(div2);

    var div3 = document.createElement("div");
    div3.style.width = "300px";
    div3.style.height = "100px";
    div3.style.background = "#0000FF";
    div3.innerHTML = "Great";

    document.getElementById("three").appendChild(div3);
};

Answer 3

Here is something fun to play with, might be helpful.

function CREATE_DIV( _WHERE_DO_YOU_WANT_IT_ , _STYLE_IT_ , _ID_IT_ , _INNER_TEXT_ ){
    var div = document.createElement("div");
    /* SET THE ID */
    div.id = _ID_IT_;
    /* SET THE INNERHTML */
    div.innerHTML = _INNER_TEXT_;
    /* SET THE STYLE PROPERTIES */ 
    for(var RESULT in _STYLE_IT_){
    if( _STYLE_IT_.hasOwnProperty(RESULT)){
          /* ADD WHAT YOU NEED */
          /* ADD WHAT YOU NEED */
          console.log(RESULT+':'+_STYLE_IT_[RESULT]);
          if(RESULT==='background'){div.style.background = _STYLE_IT_[RESULT];  }
          if(RESULT==='position'){  div.style.position   = _STYLE_IT_[RESULT];  }
          if(RESULT==='width'){     div.style.width      = _STYLE_IT_[RESULT];  }
          if(RESULT==='height'){    div.style.height     = _STYLE_IT_[RESULT];  }
          if(RESULT==='left'){      div.style.left       = _STYLE_IT_[RESULT];  }
          if(RESULT==='top'){       div.style.top        = _STYLE_IT_[RESULT];  }
          if(RESULT==='padding'){   div.style.padding    = _STYLE_IT_[RESULT];  }
          if(RESULT==='border'){    div.style.border     = _STYLE_IT_[RESULT];  }
          //div.style.setAttribute( RESULT, _STYLE_IT_[RESULT] );//.RESULT = _STYLE_IT_[RESULT];
    }}
    /* APPEND OR ADD DIV TO ELEMENT */
    /*  ( _WHERE_DO_YOU_WANT_IT_ )  */
    _WHERE_DO_YOU_WANT_IT_.appendChild(div);    
    
    
    
}///
////
////
window.onload = function() {
    var I_WANT_IT_HERE = document.getElementsByTagName('BODY')[0];
    var GIVE_IT_AN_ID  = 'DIV_01';
    var INNER_HTML_TEXT= 'Div 1<BR>Whatever i want in my DIV !!!'
    var STYLE = {}; // CREATE javascript Object of data.  NOT Array.
        STYLE['position'] = 'absolute';
        STYLE['width']    = '90%';
        STYLE['height']   = '33%';
        STYLE['left']     = '0px';
        STYLE['top']      = '0px';
        STYLE['border']   = '2px dotted red';
        STYLE['background']='rgba(300, 300, 300, 0.7)';
    CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
    
    
        STYLE['padding']  = '8px';
        STYLE['left']     = '0px';
        STYLE['top']      = '33%';
    var GIVE_IT_AN_ID  = 'DIV_02';
    var INNER_HTML_TEXT= 'Div 2'
    CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
    
    
    var STYLE = {};// THIS RESETS STYLE
                   // EXAMPLE no position is set.
        STYLE['padding']  = '8px';
        STYLE['left']     = '0px';
        STYLE['top']      = '66%';
        STYLE['border']   = '1px dotted blue';
    var GIVE_IT_AN_ID  = 'DIV_03';
    var INNER_HTML_TEXT= '<BR><BR><BR><BR>Div 3 is under Div 1'
    CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
    
    
        STYLE['left']     = '0px';
        STYLE['top']      = '66%';
        STYLE['border']   = '1px dotted lime';
    var GIVE_IT_AN_ID  = 'DIV_04';
    var I_WANT_IT_HERE = document.getElementById('DIV_02');
    var INNER_HTML_TEXT= 'Div 4 is inside Div 2<SPAN ID=SPAN></SPAN>'
    CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
    
    
        STYLE['border']   = '1px dotted blue';
    var I_WANT_IT_HERE = document.getElementById('SPAN');
    var INNER_HTML_TEXT= 'This is a span inside of DIV 02 & DIV 04'
    CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);


/*************************/};