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 成为span 元素的jQuery 包装器。 foo[0] 不应该也显示span 吗？

Answer 1

html() 写入/读取<div> 元素的innerHtml 属性；它不会替换元素。你现在实际拥有的是<div><span>bar</span></div>。所以不，这不是特别奇怪的行为。 :)

Answer 2

jQuery 对象上的索引访问器访问 jQuery 序列中的元素。在您的示例中，您创建了一个只有一个元素的 jQuery 序列 - div。您可以将 div 的内容设置为任何类型的复杂树，但它仍然只是一个元素。 html('')设置节点的内部内容，但外部节点保持不变。