2

我正在尝试使用 jquery 在 div 中注入以下跨度。

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

有什么解决方法吗？

4

3 回答 3

5

当您将innerHTML序列化的 DOM 节点传递给$('div').html(). 只要您DOCTYPE是html. 但是，DOCTYPE您的序列化 DOM 节点在插入文档之前xhtml必须清除一些额外的情况。根据W3.org，包含Attr节点、Text节点、CDATASection节点、Comment节点或ProcessingInstruction节点的序列化 DOM 节点，其数据包含与 XML Char 产品不匹配的字符（包括 U+003A COLON “:”）必须引发INVALID_STATE_ERR异常。

W3还指定了用户代理在 XML(XHTML) 上下文中设置innerHTMLDOM 属性HTMLElements时必须运行的算法。HTMLDocuments该算法的第 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 在这里。

于 2013-04-10T03:31:03.497 回答
3

转义冒号：

$('div').html('<span epub\:type="pagebreak" id="pagePrefix" title="1"></span>');
于 2013-04-05T13:05:24.750 回答
1 
$('div').append('<span />').attr('epub\:type', 'pagebreak').attr('id', 'pagePrefix').attr('title', '1');
于 2013-04-05T13:08:10.913 回答