jQuery foo.html("<span>bar</span>") not changing foo[0], so what does it mean?

Question

Using jQuery, in Firebug, if the following is done one by one:

foo = $('<div>foo</div>')

foo[0]  // => <div>

foo.html('<span>bar</span>')

foo.html()  // => "<span>bar</span>"

foo[0]  // => <div>

$('body').prepend(foo)  // => shows bar at top of page

it is strange that foo.html() shows the span, but foo[0] shows the div... why is the inconsistency? It seems that foo became a jQuery wrapper for a span element. Shouldn't foo[0] show the span also?

Answer 1

html() writes/reads the innerHtml property of the <div> element; it doesn't replace the element. What you actually have now is <div><span>bar</span></div>. So no, this isn't particularly strange behavior. :)

Answer 2

The index accessor on a jQuery object accesses the element in the jQuery sequence. In your example, you've created a jQuery sequence with just one element - the div. You can set the contents of that div to be any kind of complex tree, but it's still just one element. html('') sets the inner contents of the node, but the outer node remains unchanged.