2013-04-05 46 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