Question

我现在有点麻烦，现在通过javascript创建多个div。这个表格帮我创建了一个。但我正在努力创造3.如果有人能帮助那将是伟大的。我查看了一个表单How can I create and style a div using JavaScript?并且能够创建一个div。但我无法弄清楚创建多个从HTML div ID调用的div。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如下图所示。您的代码会创建标记<two></two>和<tree></tree>，这不是有效的html标记。

要解决此问题，只需将div代替two和three传递到document.createElement()函数即可。像这样：

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

编写类似这样的javascript

for

Answer 3

这是一个有趣的事情，可能会有所帮助。

＆＃13;

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

＆＃13;

在Javascript中创建一个div并将其输出到DOM

3 个答案: