I have a <div/> element that I am setting the innerHTML on, and setting it to a string of the form "<table><tbody><tr><div>Content</div></tr></tbody></table>". This is, I know, invalid markup, since it does not contain a <td/> element. But Instead of wraping the <div/> in a <td/>, the <div/> jumps out of the table entirely and precedes it in the DOM. However, if I have a <table/> element and set innerHTML to "<tbody><tr><div>Content</div></tr></tbody>", the <div/> is wrapped in a <td/> and stays inside the <table/>. It's this inconsistency that might be a bug.
Created attachment 27968 [details] testcase testcase showing the different behaviors.
Created attachment 169484 [details] Test case for appendChild vs. innerHTML I believe this to be a related issue to the on e described in this ticket: Platform: Mac OS X 10.8.2 Version: =< 537+ Inserting nested form elements (while invalid) results in differing behaviors when using appendChild vs. innerHTML. Compare this behavior to a non-webkit engine like Gecko.
I believe this is the correct behavior w.r.t. the spec. Have you checked how other browsers that support the HTML5 parsing algorithm behave?
Sorry, I wasn't as clear as I should have been in my previous comment: I'm not sure about how the spec dictates these two methods handle element insertion, but the internally inconsistent behavior of appending via innerHTML is what I believe is at issue. As demonstrated by the test case, only the first nested form element is ignored and not rendered (while still rendering the children). Additional form elements at the same nesting level are rendered normally (or abnormally if you like).
HTML parsing is not internally consistent. It's sanity in a bottle, but it works.
Created attachment 461563 [details] Safari 15.6 differs from other browsers For first test case: *** Safari Technical Preview 151 *** Mismatch when setting contents of 'tbody': Expected: '<tr><td><div></div></td></tr>' Actual: '<tr></tr><div></div>' Mismatch when setting contents of 'table': Expected: '<tr><td><div></div></td></tr>' Actual: '<tbody><tr></tr></tbody><div></div>' Mismatch when setting contents of 'div': Expected: '<table><tbody><tr><div></div></tr></tbody></table>' Actual: '<div></div><table><tbody><tr></tr></tbody></table>' *** Firefox Nightly 105 *** Mismatch when setting contents of 'tbody': Expected: '<tr><td><div></div></td></tr>' Actual: '<tr></tr><div></div>' Mismatch when setting contents of 'table': Expected: '<tr><td><div></div></td></tr>' Actual: '<tbody><tr></tr></tbody><div></div>' Mismatch when setting contents of 'div': Expected: '<table><tbody><tr><div></div></tr></tbody></table>' Actual: '<div></div><table><tbody><tr></tr></tbody></table>' *** Chrome Canary 106 *** Mismatch when setting contents of 'tbody': Expected: '<tr><td><div></div></td></tr>' Actual: '<tr></tr><div></div>' Mismatch when setting contents of 'table': Expected: '<tr><td><div></div></td></tr>' Actual: '<tbody><tr></tr></tbody><div></div>' Mismatch when setting contents of 'div': Expected: '<table><tbody><tr><div></div></tr></tbody></table>' Actual: '<div></div><table><tbody><tr></tr></tbody></table>' _________ All browsers match in the first test case. For second, as can be seen from attached, there is space between buttons in Safari while not in other browsers. So there seems to be an issue. I think it is less to do with DOM but more about Layout and Rendering. I am changing status to New for others to decide and update details accordingly. Thanks!
<rdar://problem/98577534>
At least now for 'Test case for appendChild vs. innerHTML', Safari 16.3 matches with other browser from the picture 'Safari 15.6 differs from other browsers'. Just wanted to update. Thanks!
We are matching in both test case with other browsers (Safari 16.4). Marking this as "RESOLVED CONFIGURATION CHANGED" and CCing 'Karl', 'Ryosuke' and 'Anne' for any input. (If I am wrong).