Bootbox在表外移动DIV标签

时间:2016-06-08 12:11:24

标签: javascript dom bootbox

我正在使用Bootbox来显示模态。

使用JS,我正在创建一个字符串作为消息:

display = "<b>Notes</b>";
display += "<br><br>";

display += "<table class='table' id='notes-table'>";
display += "<div>";
display += "<tr><td>";
display += "...";
display += "</td></tr>";
display += "</div>"; 
display += "</table>";

然后我打电话给模态:

bootbox.alert( {
    message: display,
    buttons: {
        ok: {
            label: 'Close'
        }
    }
    //Example.show("Hello world callback");
});

在控制台中记录display,我得到:

<b>Notes</b><br><br><table class='table' id='notes-table'><div><tr><td>...</td></tr></div></table>

然而,当我检查DOM时,我得到:

<b>Notes</b>
<br>
<br>
<div></div>
<table class='table' id='notes-table'>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

为什么DIV标签不再包裹表格?

1 个答案:

答案 0 :(得分:2)

发生这种情况是因为将<div>标记直接放在<table>标记内并不是有效的HTML结构,因此浏览器会自动纠正并通过放置<div>标记来返回有效表达式离开桌子。

希望这有帮助。