How do I force jQuery append to NOT automatically close a tag?
I have a JavaScript object with about 1000 properties and want to create a <table> of these entries, with eight properties in a single row, <tr>.
I am using jQuery append(); however, it is automatically appending a closing </tr> tag. I want to manually define where the closing </tr> should go. How do I accomplish this?
The object:
var g2u = {};
g2u.a1 = "";
g2u.a2 = "";
g2u.a3 = "";
g2u.a4 = "";
g2u.a5 = "";
g2u.a5a = "";
g2u.a6 = "";
g2u.a6a = "";
g2u.a6b = "";
... etc...
The <table>:
<table id="list" border="1">
</table>
<script>
var ctr = 0;
$("#list").append('<tr>');
for (var g in g2u) {
$("#list").append('<td><span class="rom">'+g+'</span>\n');
$("#list").append('<span class="eh">'+g2u[g]+'</span>\n');
$("#list").append('<span class="rom"> </span></td>\n');
ctr++;
if (ctr % 8 == 0) {
$("#list").append('</tr><tr>\n');
}
}
The broken output:
<tbody><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></tbody>
<td><span class="rom">a1</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a2</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a3</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a4</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a5</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a5a</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6a</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a6b</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a7</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a8</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a9</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a10</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a11</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a12</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a13</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a14</span></td><span class="eh"></span><span class="rom"> </span><td><span class="rom">a14a</span></td><span class="eh"></span><span class="rom"> </span><td><spa
If you append it will obviously try to close tags. Try to put your html in an string than append that string to the dom.
<script>
var ctr = 0;
var html='<tr>';
for (var g in g2u) {
html+='<td><span class="rom">'+g+'</span>\n';
html+='<span class="eh">'+g2u[g]+'</span>\n';
html+='<span class="rom"> </span></td>\n';
ctr++;
if (ctr % 8 == 0) {
html+='</tr><tr>\n';
}
}
$("#list").append(html);
You're thinking in terms of html markup, with using append you should be thinking in terms of html DOM, you don't have open tags and close tag just elements.
You can use a string to build your html then append it to the table
var ctr = 0;
var innerTable = '<tr>';
for (var g in g2u) {
innerTable += '<td><span class="rom">'+g+'</span>\n';
innerTable += '<span class="eh">'+g2u[g]+'</span>\n';
innerTable += '<span class="rom"> </span></td>\n';
ctr++;
if (ctr % 8 == 0) {
innerTable += '</tr><tr>\n';
}
}
$("#list").append(innerTable);
Seven years, but I tought I could help anyone else that comes across a similar problem. For example, if you want to use JQuery's $.each() with .append() to make an list of users, such as:
<ul>
<li>User 1</li>
<li>User 2</li>
</ul>
Here's what you DON'T want to do:
element.append(`<ul>`);
$.each(users, function(key, value) {
element.append(`<li>${value.name}</li>`);
});
element.append(`</ul>`);
The output will be something like:
<ul></ul>
<li>User 1</li>
<li>User 2</li>
Instead, here's what you WANT to do:
element.append(`<ul id="ul-users"></ul>`);
$.each(users, function(key, value) {
$("#ul-users").append(`<li>${value.name}</li>`);
});
So the output will be as follows:
<ul id="ul-users">
<li>User 1</li>
<li>User 2</li>
</ul>