jQuery foo.html ("<span> bar </span>") не меняет foo [0], так что это значит?

Question

Использование jQuery в Firebug, если следующее выполняется одно за другим:

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

странно, что foo.html() показывает span, но foo[0] показывает div... почему несоответствие?Похоже, что foo стал оболочкой jQuery для элемента span.Разве foo[0] не должен показывать span также?

Answer 1

html() записывает / читает свойство innerHtml элемента <div>;это не заменяет элемент.То, что у вас сейчас есть, это <div><span>bar</span></div>.Так что нет, это не особенно странное поведение.:)

Answer 2

Индексный метод доступа к объекту jQuery обращается к элементу в последовательности jQuery. В вашем примере вы создали последовательность jQuery только с одним элементом - div. Вы можете установить содержимое этого div для любого вида сложного дерева, но это все еще только один элемент. html('') устанавливает внутреннее содержимое узла, но внешний узел остается неизменным.