This is an example of a more general question, regarding the relationship between the HTML5 parser and the DOM API. Some things aren't allowed in HTML that apparently aren't relevant to the DOM API — and so you can create the "unallowed" HTML situation via the DOM.
E.g. according to the HTML5 spec, the p element has a content model of only "phrasing content". Now the "content model" is "A normative description of what content must be included as children and descendants of the element." and "phrasing content" is basically text and "intra-paragraph" markup like links and spans, NOT div
elements.
Indeed, if I make an HTML document or cause an HTML snippet to be parsed like this, the div gets forcibly "unnested":
var containerEl = document.createElement('body');
containerEl.innerHTML = "<p><div></div></p>";
console.log(containerEl.innerHTML); // -> "<p></p><div></div><p></p>"
Seemingly during parsing, the "original" paragraph gets split into two, with the div between.
However this code lets me insert a div
into a p
without issue:
let pEl = document.createElement('p'),
divEl = document.createElement('div');
pEl.appendChild(divEl);
console.log(pEl.outerHTML); // -> "<p><div></div></p>"
Now the DOM Level 3 spec says that the .appendChild
method can raise a DOMException
if the wrong "type" of node is inserted:
HIERARCHY_REQUEST_ERR: Raised if this node is of a type that does not allow children of the type of the newChild node
I suspect in this case "type" might be referring more to, e.g. you can't append an Element
node as a child of a Text
node.
Is there anything in the standard that clarifies the behavior here, acknowledging the discrepancy? What are the consequences to making a DOM hierarchy via JavaScript that's not allowed when parsing HTML?