如何强制 jQuery append 不自动关闭标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12948853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I force jQuery append to NOT automatically close a tag?
提问by Tina CG
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>.
我有一个包含大约 1000 个属性的 JavaScript 对象，我想创建<table>这些条目中的一个，在一行中包含八个属性<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?
我正在使用 jQuery append()；但是，它会自动附加结束</tr>标记。我想手动定义关闭的位置</tr>。我该如何实现？
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>：
<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 brokenoutput:
该断输出：
<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
回答by zevy_boy
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.
如果您附加，它显然会尝试关闭标签。尝试将您的 html 放在一个字符串中，而不是将该字符串附加到 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);
回答by Musa
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.
您正在考虑 html 标记，使用 append 您应该考虑 html DOM，您没有打开标签和关闭标签只是元素。
You can use a string to build your html then append it to the table
您可以使用字符串来构建 html，然后将其附加到表格中
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);
