2010-03-31 72 views
11

雖然與jQuery HTML創建自封閉元素()以下問題發生:jQuery的HTML()和自閉標籤

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

將創建

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

它關閉正確<li>標籤但不是<input>

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

我已經到處找,發現了一個解決方案,但該頁面不存在了,因爲你看到:http://dev.jquery.it/ticket/3378

任何人知道如何解決這一問題?

+0

你不能只將其更改爲 $( '#someId')HTML( '

  • ') – Avitus 2010-03-31 23:59:21

    +0

    你正在使用的。 XHTML關閉方法。這是你想要的還是隻是HTML? – dscher 2010-04-01 00:00:28

    +0

    您不應該自我關閉html – theonlygusti 2018-02-10 09:29:13

    回答

    7

    爲了澄清,這是有效的HTML:

    <input type="checkbox"> 
    

    ,這是有效的XML(包括XHTML):

    <input type="checkbox"/> 
    

    不是有效的HTML。話雖如此,大多數瀏覽器可能會接受它(但如果這對您來說意味着什麼,文檔將無法通過驗證)。

    html()使用innerHTML。在IE和其他瀏覽器中,這有問題,因爲XHTML仍然被建模爲HTML DOM。見Internal IE-HTML DOM still isn’t XHTML compliant

    基本上,使用XHTML的原因很少。這是一個跨瀏覽器的噩夢。關於爲什麼看到XHTML - Is writing self closing tags for elements not traditionally empty bad practise?的詳細說明,特別是第一個答案。

    +0

    我使用的是xhtml ... – UXTE 2010-03-31 23:59:20

    +0

    但它不正確XHTML - 「在XHTML中,標記必須正確關閉,像這樣。」 – dscher 2010-03-31 23:59:40

    +1

    @Pedro我的建議是「不要使用XHTML」。這是一個跨瀏覽器的噩夢。見http://stackoverflow.com/questions/348736/xhtml-is-writing-self-closing-tags-for-elements-not-traditionally-empty-bad-pra – cletus 2010-04-01 00:01:00

    1

    在HTML5時代,人們可能會認爲<input type="checkbox"><input type="checkbox" />是同一個void元素的同等有效表示。

    雖然這是真的,原因innerHTML仍然沒有序列化的/>無效元素是雙重的:

    • 一個空元素是一個空元素,無論你如何它代表到瀏覽器。在瀏覽器構建元素時,它的標記是不相關的,就DOM而言,它是一個類型複選框的input元素。元素的「標籤」唯一相關的地方是其tagName屬性,以及even that has its own quirk

    • 有一個瀏覽器沒有任何理由開始序列化空元素與/>語法時HTML5本身,由於是基於HTML,XML不是的,並不需要它。這樣做僅僅是因爲使用/>語法同樣有效,因此不必中斷與舊站點的兼容性,因爲它們的絕對零增益(因爲/>的存在不會以任何方式改變輸出的含義)。這讓我們回到cletus的區分HTML標記和XHTML標記的答案。

    innerHTML,並且通過擴展jQuery.html(),旨在爲您從DOM的元素的內容的HTML表示。它是而不是旨在爲您提供瀏覽器用於在DOM中構建元素的HTML標記。你不能「修復」這個,因爲沒有什麼可以解決的。你需要做的是避免依賴元素的innerHTML來進行除偶爾的調試會話之外的其他任何事情。

    參見:Nested <p> tag auto-closing/opening