How to build a complex HTML dynamically using jquery

Question

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

• N.J.Dawson: Possible duplicate of What is the most efficient way to create HTML elements using jQuery? - some of the methods in here could probably clean it up a bit for maintainability sake.
• derelict: check on the difference between .append() and .appendTo(), make sure you're creating complete elements, try chaining .append() calls, and make sure the arguments are jQuery objects and not strings. oh, and follow @N.J.Dawson's link for a much better idea of how to do this in general.
• Lasith: Seems that you need to append html inside the mainDiv. Is that you want?
• A NewBie: Yes .. The whole thing is appended to the main div. I,then plan to add another <tr> tag and a few columns to the innermost table to display values dynamically in the respective columns
• A NewBie: @derelict : If I have to use jquery objects, wouldn't I need to give IDs to each of the elements.How can I give Ids dynamically to be used later?

Answer 1

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>

• A NewBie: Thanks ,I will try it out.
• A NewBie: What about the closing tag for container_div. Is that not required?
• Zakaria Acharki: You're welcome, glad i could helps... closing tag for container_div not required, it will be closed automatically.
• A NewBie: Thanks a lot for your help. Its working. I was wondering if I could ask you one more thing. See I have these columns ID,name and Status. I have to display values in these columns dynamically as well. I was wondering if you could guide me on that.The values are got through an AJAX call and are available as a list of objects.
• A NewBie: Sure .. I will make another post as its not really related to this post. I will try to figure it myself first

Answer 2

You are close but not quite there.

$('MainDiv').append('some html here')

The .append method works in such a way that you have a selector:

$('MainDiv')

This selects some DOM element that you have available to work with, you then call the .append method on it:

$('Some Selector').append('Some HTML');

this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.

You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.