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

Possible duplicate of [What is the most efficient way to create HTML elements using jQuery?](http://stackoverflow.com/questions/327047/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. — N.J.Dawson, Sep 12 '16 at 16:53
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. — derelict, Sep 12 '16 at 16:56
Seems that you need to append html inside the mainDiv. Is that you want? — Lasith, Sep 12 '16 at 16:59
Yes .. The whole thing is appended to the main div. I,then plan to add another tag and a few columns to the innermost table to display values dynamically in the respective columns — A NewBie, Sep 12 '16 at 17:02
@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? — A NewBie, Sep 12 '16 at 17:04
jQuery has a perfect method for that exact situation, you have to include another jQuery library for it, jQuery ui. simply select the element you want to give the unique id and call $('some selector').uniqueId(); this will automatically generate ID's for you that are never the same but still predictable. You can find out more about it here: https://api.jqueryui.com/uniqueId/#uniqueId — Mike, Sep 12 '16 at 17:20

score 1 · Answer 1 · answered Sep 12 '16 at 17:03

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.

Zakaria Acharki · Accepted Answer · 2016-09-12T17:22:32.987

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>

What about the closing tag for container_div. Is that not required? — A NewBie, Sep 12 '16 at 17:12
You're welcome, glad i could helps... closing tag for container_div not required, it will be closed automatically. — Zakaria Acharki, Sep 12 '16 at 17:16
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, Sep 12 '16 at 17:32
Sure I could help just update the OP, or it will be better if you post another question for this specific case. — Zakaria Acharki, Sep 12 '16 at 17:38
Sure .. I will make another post as its not really related to this post. I will try to figure it myself first — A NewBie, Sep 12 '16 at 17:52

How to build a complex HTML dynamically using jquery

2 Answers2