jQuery append（）div标签没有按预期工作

Question

我的附加div出了问题。 这是我的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结构无效。您不应在div之间放置tr's。如果你想把它放在你的桌子里，你应该把它放在td里面。

如果您想在表格中添加其他行，则应该放置tr而不是div元素，并附加其内容，或者您​​应该使用jQuery .after()或{ {1}}将元素定位在特定位置。

Answer 4

如果您希望在表格中添加div，则只能在<td>内添加div，否则您无法在<div>内添加<table>

Answer 5

我认为不需要分配变量，你可以将html代码直接放到after（）方法。

以下是剧本：

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

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