Dynamic append Div using Jquery or Javascript

Question

I want to append multiple div's one after another. In my scenario I retrieve data from SharePoint and from that I get some variable values like this 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");
   }

After getting variable value every iteration of loop, I want to append those variable value in div's one after another. And create page body. In the div I want to assign the value at below position

span id – RoomNo - RoomNo (Variable value)

span id – StartTime - StartTime (Variable value)

span id – EndTime - EndTime (Variable value)

td id= MeetingTitle – MeetingTitle (Variable value)

Div is look like below,

  <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>
  .............
  .
  .

The number of div's equals to loop iteration. So please suggest me how to implement it.

Many thanks and Regards, 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> ');

}