使用Jquery或Javascript動態附加Div

Question

我想一個接一個地附加多個div。 在我的方案中，我從SharePoint檢索數據，並從中獲得一些變量值，例如：Variable：-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中，我想在下面的位置分配值

跨度ID – RoomNo-RoomNo（變量值）

范圍ID – StartTime-StartTime（變量值）

跨度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的數量等於循環迭代。 因此，請建議我如何實施它。

非常感謝和問候，Digambar Kashid

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

}