jQuery html() 和自閉合標簽

Question

使用 jQuery html() 創建自閉合元素時，會發生以下問題：

$('#someId').html('<li><input type="checkbox" /></li>')

會創造

<li><input type="checkbox"></li>

它正確地關閉了<li>標簽而不是<input>

這似乎是 html() 函數中使用的 innerHTML 的問題。

我到處尋找並找到了解決方案，但該頁面不再可用，如您所見： http : //dev.jquery.it/ticket/3378

有誰知道如何解決這個問題？

Answer 1

澄清一下，這是有效的 HTML：

<input type="checkbox">

這是有效的 XML（包括 XHTML）：

<input type="checkbox"/>

但它不是有效的 HTML。 話雖如此，大多數瀏覽器可能無論如何都會接受它（但如果這對您有任何意義，文檔將無法通過驗證）。

html()使用innerHTML 。 在 IE 和可能的其他瀏覽器中，這有問題，因為 XHTML 仍然建模為 HTML DOM。 請參閱內部 IE-HTML DOM 仍然不符合 XHTML 。

基本上，幾乎沒有理由使用 XHTML。 這是一個跨瀏覽器的噩夢。 有關為什么要查看XHTML - 為元素編寫自關閉標簽傳統上不是空的不良做法的詳細概要？ ，尤其是第一個答案。

Answer 2

在 HTML5 時代，人們可能會爭辯說<input type="checkbox">和<input type="checkbox" />是同一個 void 元素的同樣有效的表示。

雖然這是真的，但innerHTML仍然在沒有/>情況下序列化空元素的原因有兩個：

• 一個空元素是一個空元素，不管你如何向瀏覽器表示它。 當瀏覽器構建元素時，它的標記已經無關緊要，就 DOM 而言，它是一個復選框類型的input元素。 元素的“標簽”唯一相關的地方是它的tagName屬性， 甚至它也有自己的 quirk 。

• 當 HTML5 本身基於 HTML 而不是 XML 不需要它時，瀏覽器沒有任何理由開始使用/>語法序列化 void 元素。 這樣做只是因為使用/>語法同樣有效，不必要地破壞與遺留站點的兼容性以獲得絕對零增益（因為/>存在不會以任何方式改變輸出的含義）。 這讓我們回到了 cletus 的答案，區分了 HTML 標記和 XHTML 標記。

innerHTML以及擴展名jQuery.html()旨在為您提供來自 DOM的元素內容的 HTML 表示。 它並非旨在為您提供瀏覽器用於在 DOM 中構造元素的 HTML 標記。 你不能“修復”這個，因為沒有什么可以修復的。 您需要做的是，除了偶爾的調試會話之外，避免依賴元素的innerHTML 。

另請參閱： 嵌套 <p> 標簽自動關閉/打開