Bug 26151 – Value of element.innerHTML incorrect when using XML style close tags.

• Status: RESOLVED
• Resolution: INVALID
• Component: DOM

[Ian Taylor]

If you use an XML style close tag to signify an empty element, when you go to get the innerHTML of that element via javascript, it will behave as if the tag is not closed. 

Here is a simple test to reproduce the issue
<div id='foo'/>
<div id='bar'></div>
<script>
	//the innerHTML of a div with a shortened XML style end tag is broken.
	var html = document.getElementById("foo").innerHTML;
	var html2 = document.getElementById("bar").innerHTML;
	if (html != html2)
	{
		alert("error: foo should have no content, but was " +html);
	}
</script>

 I've verified that this issue exists in Webkit nightly 5528.16, r44341, as well as Safari 4 beta and Google Chrome 2.0.172.30.  It does not exist in Firefox or IE.

[Ian Taylor]

I feel that this is a bad bug as its behavior is unpredictable and using the innerHTML property is very common in DHTML/Javascript development.

[Mark Rowe (bdash)]

HTML doesn't have a concept of a self-closing tag, so "foo" in your example is never closed and therefore "bar" is a child of "foo".  See <http://software.hixie.ch/utilities/js/live-dom-viewer/?%3Cdiv%20id%3D%22foo%22%2F%3E%0A%3Cdiv%20id%3D%22bar%22%3E%3C%2Fdiv%3E> for a visual representation of the DOM that your HTML snippet produces.  This should make it clear that WebKit's behavior is correct.

[Mark Rowe (bdash)]

It's worth noting that Firefox doesn't display the alert as at the time the script is evaluated document.getElementById("foo") returns null and therefore an exception is raised and the html != html2 check is not evaluated.  The DOM Firefox looks identical in terms of the nested divs.

[Ian Taylor]

Thanks very much for your speedy reply on this issue.  You are right.  

I was using an XHTML doctype and assumed that meant that the valid XML syntax for self closed tags was valid in XHTML as well.

Some information on the subject.

http://dusan.fora.si/blog/self-closing-tags
http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-br

That said, there is a difference here between how Webkit handles this case and how other browsers do. 

I've written a more nuanced test, that shows the difference.
<div id='outer'>
	<li><div id='foo'/></li>
	<li><div id='bar'></div></li>
</div>
<script>
	var foo = document.getElementById("foo").innerHTML;
	var bar = document.getElementById("bar").innerHTML;
	alert("foo was: "+ foo + "\nbar was: "+bar);	
</script>		

This will output the following in IE/Firefox
foo was: 
bar was:
But Webkit Outputs
foo was: 
	<li><div id="bar"></div></li>

bar was: 
It looks like WebKit is using a different element scope to look for the "missing" end of the self closed tag than IE/Firefox. The <li> element contains the search for the "missing" end tag in IE/FF, but in Webkit it does not.  I can open a different bug if you'd prefer.

[Mark Rowe (bdash)]

Please do file a new bug, and please attach the test case as an attachment rather than putting it in the comments field.  It makes it much quicker to test as we don't have to save it in to a file ourselves.  Thanks!