Bootbox moving DIV tags outside of table

Question

I'm using Bootbox to display a modal.

Using JS, I'm creating a string as the message :

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>";

Then I call the modal :

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

Logging display in the console, I get:

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

However, when I inspect the DOM, I get:

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

Why are the DIV tags no longer wrapping the table?

Answer 1

That happen because putting <div> tag directly inside a <table> tag is not a valid HTML structure, so the browser will rectify that automatically and return the valid expression by putting the <div> tag out of the table.

Hope this helps.