A NewBie A NewBie - 2 months ago 12
HTML Question

How to build a complex HTML dynamically using jquery

I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.

At present ,I am using

.append
method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?

$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");

Answer

You could use append() like :

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
    "<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
    "<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

Hope this helps.

NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td style='width:70px;' class='col' nowrap>ID</td>" +
    "<td style='width:100px' class='col'>Name</td>" +
    "<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);
.col{
  background-color: #999999;
  font-weight: bold;
  color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>