434651 - empty element/ tag followed by closing element/ tag renders ex.. <div /> something </div>

Status: RESOLVED DUPLICATE of bug 162653

(Core :: DOM: Core & HTML, defect)

Description

[jdavid.net]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008051806 Minefield/3.0pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9pre) Gecko/2008051806 Minefield/3.0pre

for example using jQuery  $("#content").append("<div /> something </div>");
will append malformed HTML, and FF will render it.

so this renders
<div /> something </div>

it should produce an error, or render it like
<div />
something
</div> <-- extra closing div

Reproducible: Always

Steps to Reproduce:
for example using jQuery  $("#content").append("<div /> something </div>");
will append malformed HTML, and FF will render it.

so this renders
<div /> something </div>

it should produce an error, or render it like
<div />
something
</div> <-- extra closing div


Expected Results:  
i am not sure what the best solution is for this, it might be best to leave it as is.  i think the best solution would be an error in firebug or a console write, but Firebug really only detects JS errors.

maybe something like "unbalanced, or extra ??? closing tags/elements exist in this document" in a console log

i chose this as a minor problem over trivial as it relates to standards rather than just the presentation of the object.

Comment 1

[John Resig]

Does this problem persist if you don't use jQuery, such as doing:

  document.getElementById("content").innerHTML = "<div /> something </div>";

Comment 2

[jdavid.net]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a page title</title>


</head>

<body>
<div id="content">
	<div id="someTitle"><strong> a title </strong></div>
</div>
<script>
	document.getElementById("content").innerHTML = "<div /> something </div>";
</script>
</body>
</html>

Comment 3

[jdavid.net]

the HTML result is different than the XHTML version

in the html version it seems self healing
in the xhtml version:
<
something

is the result.

i am not sure either is really right.  i think the best scenario is if an error is visible to the designer in firebug or at the console

Comment 4

[Tyler Downer [He/Him]]

Creating Testcase.

Comment 5

[Tyler Downer [He/Him]]

Attachment: document.getElementById testcase

Comment 6

[Tyler Downer [He/Him]]

Attachment: Plain html

Comment 7

[Tyler Downer [He/Him]]

While developing this testcase, it appeared that Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0, the version using "document.getElementById..." did not show the text "something" in the HTMl, when rendered. 

However, in testcase2.html, I removed all the script and put <div/>something</div> (which is very invalid code), and something appeared. This is in XHTML 1.0 Transitional. 

As for the <div />, that is invaild in and of itself (being an empty tag, like img). But, Firefox is treating "<div /> something</div>" as it is supposed too. The ending </div> closes <body> and <html>. Here is the validation field for the div with Dreamweaver
"tag: " html" allows optional closing tag. closing tag:  "div" closes "html" context. Validation will proceed as if context is closed.[XHTML 1.0 transitional]". 

So, while the div is wrong, Firefox is rendering it correctly. 

With the scripting example, Firefox is also treating the code with the contempt it deserves. The last </div> is invalid, being treated as a text entity, but the < messes it up. Because "something" is left in the cold, Firefox ignores it.

Comment 8

[Daniel.S]

(In reply to comment #7)
> While developing this testcase, it appeared that Mozilla/5.0 (Windows; U;
> Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0, the version using
> "document.getElementById..." did not show the text "something" in the HTMl,
> when rendered. 

The error console tells you why.

Else, this a a dupe.