2013-04-05 32 views
2

我想在使用jquery的div下跨度注入。使用jquery注入一個具有冒號屬性的標籤使用jquery

HTML: 
<span epub:type="pagebreak" id="pagePrefix" title="1"></span> 

JS: 
$('div').html('<span epub:type="pagebreak" id="pagePrefix" title="1"></span>'); 

,並收到以下錯誤,SyntaxError: DOM Exception 12

什麼解決辦法嗎?

+0

更改epub:輸入epub類型..或者要嚴格使用數據-epub-type – 2013-04-05 13:06:36

回答

5

jQuery使用innerHTML當你通過序列化DOM節點$('div').html()。只要您的DOCTYPEhtml的任何味道,這工作正常。但是,使用DOCTYPExhtml,在插入文檔之前,您的序列化DOM節點必須清除some additional cases。根據W3.org,包含節點的Attr節點,Text節點,CDATASection節點,Comment節點或ProcessingInstruction節點,其數據包含未與XML匹配的字符的串行化DOM節點(包括U + 003A COLON「:」)必須提高一個INVALID_STATE_ERR異常。

W3還指定用戶代理必須以XML(XHTML)上下文設置上HTMLElementsHTMLDocumentsinnerHTML DOM屬性時運行該算法。步驟2在該算法是:

如果innerHTML屬性被一個元素上設置,用戶代理必須喂解析器剛剛創建對應於該元素的開始標籤中的字符串,宣佈所有的命名空間前綴的是在DOM中的該元素的範圍內,以及聲明DOM中該元素的範圍內的默認命名空間(如果有的話)。

用戶代理不知道您已經在父元素上指定了epub名稱空間,因爲當前上下文位於根上下文之外。因此,當您附加到DOM時,您需要爲序列化的DOM節點指定命名空間。

$('div').html('<span xmlns:epub="http://www.idpf.org/2007/ops" 
     epub:type="pagebreak" id="pagePrefix" title="1"></span>'); 

jsFiddle here

3

逃離冒號:

$('div').html('<span epub\:type="pagebreak" id="pagePrefix" title="1"></span>'); 
+0

它不工作,因爲我運行jquery代碼的頁面是xhtml ..任何其他方式? – codef0rmer 2013-04-05 13:34:02

+0

它是如何失敗?你要出去什麼?轉義角色應該只對JavaScript感興趣。 – Blazemonger 2013-04-05 14:11:51

+0

我嘗試將.xhtml中的頁面重命名爲.html,並移除'<! - ?xml version =「1.0」encoding =「UTF-8」? - >'並且您的代碼開始工作。但我不能將頁面重命名爲html。那麼該怎麼辦? – codef0rmer 2013-04-08 06:58:41

1
$('div').append('<span />').attr('epub\:type', 'pagebreak').attr('id', 'pagePrefix').attr('title', '1'); 
+0

我無法分離所有屬性,因爲我從服務中獲取了大量的html數據。 – codef0rmer 2013-04-05 13:17:23

相關問題