Putting Html In A Div Closed Within Its Opening Tag, Causes Content Below That Div To Disappear

[Jay32]

 http://jsfiddle.net/E3jVv/4/

Click on the text 'Click me'.

Apparently, it makes a difference whether the first div is closed like this:

<div id="first" />

Or like this:

<div id="first" ></div>

Using the first div, closed within its opening tag, causes Jquery to delete everything below that div when appending html to it.

Using the second div, closed with an explicit closing tag, it works as expected. The first div has some html set, and all other elements are left undisturbed.

[dmethvin]

Occurs regardless of jQuery or bare DOM:  http://jsfiddle.net/E3jVv/6/

Imma point out that technically a self-closed div element is not valid markup because only elements that *cannot* have content can be self-closed. Your div can have content (in fact you're trying to add it) but it just doesn't happen to have content when the document is parsed.

The start and end tags of certain normal elements can be omitted, as described later. Those that cannot be omitted must not be omitted. Void elements only have a start tag; end tags must not be specified for void elements ... if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/) ...  http://www.w3.org/TR/html5/syntax.html#void-elements

It seems pretty strange to me, I agree, but technically you cannot self-close a div tag. We allow $("<div/>") but that actually creates a div element inside jQuery. Your case has the element in the markup so jQuery isn't involved in the creation of the tree at all.

[Jay32]

Alright, thanks for looking into it.