jQuery foo.html（「<span> bar</span>」）不改變foo [0]，那麼它是什麼意思？

Question

使用jQuery，螢火蟲，如果下面做一個接一個：

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('')設置節點的內部內容，但外部節點保持不變。