Is it normal that JavaScript can create otherwise invalid DOM?

Question

Somewhat by accident, I found out that a span inserted directly inside a tbody stays in place when done with JavaScript (insertBefore), where such invalid DOM would if created with literal HTML lead to the span being placed before the entire table.

I expected either the same behaviour as with literal HTML or some DOM Exception being thrown.

E.g. this HTML

<table>
    <thead><tr><th>Table Header</th></td></thead>
    <tbody>
        <span>from HTML &rarr; goes up</span>
        <tr><td>Table Contents</td></tr>
    </tbody>
</table>

with this JavaScript:

var span = document.createElement('span'),
    tbody = document.querySelector('tbody');
span.innerHTML = 'Created with JS → stays in place';
tbody.insertBefore(span, tbody.querySelector('tr'));

renders "Created with JS → stays in place" between the header and the first row; the original, literal, span moves outside of the table.

Is this normal, and can/should I count on this? (It behaves the same in FF, Chrome, Opera, IE >= 9 (not tested below)).

Also, is there a way to query the DOM whether content of a certain type would (under normal circumstances) be valid at a certain point in the DOM? This is actually what I wanted to do when I found out about this quirk (which it is, imho).

The fiddle is here: http://jsfiddle.net/xr37g9kw/2/

Answer 1

As for "is this normal, and can/should I count on this?" Sadly, yes. But mostly you should be aware of the node types you are working with. NB, in case of table, there are a handful of not so well known DOM methods (HTMLTableElement.rows. InsertRow() and so on).

As for "is there a way to query the DOM whether content of a certain type would (under normal circumstances) be valid at a certain point in the DOM?" nothing built-in for this exact purpose, but you could exploit one native feature of JavaScript -> DOM API: you can let browser to re-parse HTML chunk in the "literal way". Yes, I am speaking about innerHTML.

In your fiddle, adding**tbody.outerHTML = tbody.outerHTML** "fixes" the structure, so you could hypothetically take some DOM node, look at its DOM tree, clone, "re-eval" it and compare with original.