如何复制一个div多个固定的次数答案

【问题标题】：How to replicate a div multiple fixed no of times如何复制一个div多个固定的次数
【发布时间】：2012-07-02 06:37:54
【问题描述】：

我想多次复制整个 div（即在 A4 纸大小的左上角、右上角、左下角、右下角）

    <script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element;

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>


  <div class = "layout">
 <div class="header"><asp:label id="label1" runat="server/></div>
   <div class="chart"><asp:label id="label2" runat="server/></div>
    <div class="legend"><asp:label id="label3" runat="server/></div>
     <div class="info1"><asp:label id="label4" runat="server/></div>
      <div class="info2"><asp:label id="label5" runat="server/></div>
      <div class="info3"><asp:label id="label6" runat="server/></div>............
  </div>

  ![enter image description here][1]
  the screen shot is attached below

【问题讨论】：

标签： javascript asp.net css

【解决方案1】：

你不能用 javascript 来做，因为你有 asp.net 控件。为您的每个 div 添加runat="server" 并更改他们的ID to Upperleftcorner, Upperrightcornerbottom, bottomleftcorner, bottomrightcorner.

代码：

          List<HtmlGenericControl> alldivs=new List<HtmlGenericControl>(4);
            alldivs.Add(Upperleftcorner);
            alldivs.Add(Upperrightcornerbottom);
            alldivs.Add(bottomleftcorner);
            alldivs.Add(bottomrightcorner); 
            foreach(HtmlGenericControl divparent in alldivs)
            {
            HtmlGenericControl divholder= new HtmlGenericControl("div");
            divholder.Attributes.Add("class", "layout");
            for(int i=1;i<=6;i++)
            {
            HtmlGenericControl div= new HtmlGenericControl("div");
            if(i==1)
            div.Attributes.Add("class", "header");
            if(i==2)
            div.Attributes.Add("class", "chart");
            if(i==3)
            div.Attributes.Add("class", "legend");
            if(i==4)
            div.Attributes.Add("class", "info1");
            if(i==5)
            div.Attributes.Add("class", "info2");
            if(i==6)
            div.Attributes.Add("class", "info3");
            Label l=new Label();
            div.Controls.Add(l);
            divholder.Controls.Add(div);
            }
            divparent.Controls.Add(divholder);
            }

使用 javascript 你必须使用<span>

<script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element='<div class = "layout"><div class="header"><span  class="label1" /></div><div class="chart"><span  class="label2" /></div><div class="legend"><span  class="label3" /></div><div class="info1"><span  class="label4" r/></div><div class="info2"><span  class="label5" /></div><div class="info3"><span class="label6" /></div></div>';

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>

【讨论】：

嘿 ashwin ，我已经使用了一个 Htmlgeneric 控件，它的数据是多个（即；我以列表的形式传递数据），它为我提供了我所期望的完美输出，但问题是，我想重复多次的主要布局（即左上角，右上角，左下角，右下角。）
我正在尝试使用类似这样的方法
@Sudippal
我不明白您所说的“重复多次（即左上角、右上角、左下角、右下角）”是什么意思。
在问题中发布屏幕截图。
我想你没有明白我想说的话，看截图，我希望多次反映同一个图像..使用上面的代码毫无疑问所有子控件都会被置于家长控制之下，我真正关心的是我必须多次重复实际图像而不编写额外的代码行..