使用 Jquery 或 Javascript 动态追加 Div

Question

我想一个接一个地追加多个 div。 在我的场景中，我从 SharePoint 检索数据，并从中获得一些变量值，如下所示 变量：- StartTime、EndTime、MeetingTitle、RoomNo.

 $(xData.responseXML).find("z\\:row, row").each(function() {
     var StartTime = $(this).attr("ows_EventDate");
     var EndTime = $(this).attr("ows_EndDate");
     var MeetingTitle = $(this).attr("ows_Title");
     var BuildingName = $(this).attr("ows_BuildingName");
     var RoomNo = $(this).attr("ows_Facilities");
   }

 

在每次循环迭代获取变量值后，我想将这些变量值一个接一个地附加到 div 中。并创建页面正文。 在 div 我想在下面的位置分配值

span id - RoomNo - RoomNo（变量值）

span id - StartTime - StartTime（变量值）

span id - EndTime - EndTime（变量值）

td id= MeetingTitle – MeetingTitle（变量值）

Div 如下所示，

  <div class="box"  style="float:left">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center"><span class="acqabold">Room No.</span><br />
              <span class="numberbold" id="RoomNo">01</span></td>
              <td align="right"><span class="smacqabold" id="Today">YYYY<br>
              DD Month </span><br> 
              <span class="bluebold" id="StartTime">08.00</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">10.00</span></td>
          </tr>
        </table>
      </td>
      <tr>
          <td align="center"  class="bluehead" id="MeetingTitle">
            XYZ Meeting.
          </td>
      </tr>
    </table>
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  <div class="box"  style="float:left">
    //same as above
  </div>
  .............
  .
  .

     

div 的数量等于循环迭代。 所以请建议我如何实现它。

非常感谢和问候， 迪甘巴尔·卡希德

Answer 1

如果你可以给容器盒一个 ID（对于这个例子 id="container"）你可以使用 jQuery：

$("#container").append("<div ...");

Answer 2

Add one parent Container id i named parentContainer in this below example

var boxLength = $( ".box" ).length();

for(var i=0;i<=boxLength;i++){

$("#parentContainer") . append ('<div class="box"  style="float:left">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td align="center"><span class="acqabold">Room No.</span><br />
                                    <span class="numberbold" id="RoomNo">' + RoomNo + '</span></td>
                                    <td align="right"><span class="smacqabold" id="Today">YYYY<br>
                                    DD Month </span><br> 
                                    <span class="bluebold" id="StartTime">' + StartTime + '</span> <span class="smbluebold">to</span><span class="bluebold" id="EndTime">'+EndTime+'</span></td>
                                </tr>
                              </table></td>
                                   <tr>
                            <td align="center"  class="bluehead" id="MeetingTitle">
                             '+ MeetingTitle +'</td>
                          </tr>
                  </table>
                </div> ');

}