HTML如何自動創建/以編程方式創建div？

我有這樣一個4x3的格網箱：HTML如何自動創建/以編程方式創建div？

 <div id="MainDiv" style="border:1px solid black; width:122px; height:160px;"> 
     <div id="Column1" style="float:left"> 
      <div id="sq1" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq2" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq3" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq4" style="width:40px; height:40px;"> 
      </div> 
     </div> 
     <div id="Column2" style="float:left"> 
      <div id="sq5" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq6" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq7" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq8" style="width:40px; height:40px;"> 
      </div> 
     </div> 
     <div id="Column3" style="float:left"> 
      <div id="sq9" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq10" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq11" style="width:40px; height:40px;"> 
      </div> 
      <div id="sq12" style="width:40px; height:40px;"> 
      </div> 
     </div>

我怎樣寫的代碼自動完成整個過程只需幾行？

來源

2012-09-21 bernlim

所以你想要一個行* col div盒？ – Marcus

你使用什麼語言？ – Marcus

你想要什麼，一個生成代碼的工具，以便您可以複製或者在頁面加載時生成代碼的函數？ – Marcus

的jsfiddle這裏：

http://jsfiddle.net/UnMJq/1/

是你想要的嗎？

來源

2012-09-21 04:03:17 Marcus

您可以使用java腳本來迭代和動態創建元素。

此代碼有效。 ||使用元素||

<script type="text/javascript"> 
var my_div = null; 
var mainDiv = null; 
var column = null; 
var sq = null; 
function addElement() 
{ 
    // create a new div element 
    // and give it some content 
    mainDiv = document.createElement("div"); 
    mainDiv.setAttribute('id', 'MainDiv'); 
    mainDiv.setAttribute('style', 'border:1px solid black; width:122px; height:160px;'); 

    var i=0,id; 
    var k= 1; 
    for(j=0;j<3;j++) { 
     column = document.createElement("div"); 
     column.setAttribute('id', 'Column' + (j+1)); 
     column.setAttribute('style', 'float:left'); 

     for(i=0; i<4; i++) { 
      sq = document.createElement("div"); 
      sq.setAttribute('id', "sq" + k); 
      sq.setAttribute('style', 'width:40px; height:40px;'); 
      k++; 

      column.appendChild(sq); 
     } 

     mainDiv.appendChild(column); 
    } 
    // add the newly created element and it's content into the DOM 
    my_div = document.getElementById("org_div1"); 
    document.body.insertBefore(mainDiv, my_div); 
} 

</script> 

<body onload="addElement()"> 
<div id='org_div1'> The text above has been created dynamically.</div> 
</body> 
</html>

來源

2012-09-21 04:04:08 swemon

HTML如何自動創建/以編程方式創建div？

回答

相關問題