jQuery append()div标记未按预期工作

Question

我的appenddiv有问题。这是我的html 的大致想法

<table>
<tr>
<td>title 1</td>
<td>subject 2</td>
</tr>
<div id='appenddiv'></div>
<tr>
<td>title 2</td>
<td>subject 2</td>
</tr>
</table>

我的jquery脚本是这样的：

var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);

所有这些都能很好地与脚本配合使用，它会在应该的时候触发等等。但我的问题是，它没有将新的html放在div标记中，而是将其添加到表的顶部？

知道为什么吗？

Answer 1

正如moonwave99所说，不能将<div>作为表元素的直接子元素。如果你总是在第一行后添加，你可以做：

var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);

Answer 2

不能将<div>作为<table>元素的直接子元素，所以它是在它的外部呈现的。

Answer 3

您的html结构无效。您不应该在tr's之间放置div。如果你想把它放在桌子里，你应该把它放进td里。

如果要向表中添加另一行，则应放置tr而不是div元素，并附加其内容，或者应使用jQuery .after()或.before()将元素定位在特定位置。

Answer 4

如果您想在表中添加div，则只能在<td>内添加div，否则不能仅在<table> 内添加<div>

Answer 5

我认为不需要分配变量，可以将html代码直接放在after((方法中。

下面是脚本：

$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");

上面的脚本将始终在第一行之后添加新行。