使用jquery在其中注入具有冒号的属性的标记

Question

我正在尝试使用jquery在div中注入span。

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

任何解决方法吗？

Answer 1

当您将序列化的DOM节点传递给innerHTML时，jQuery使用$('div').html()。只要DOCTYPE是html的任何风格，这都可以正常工作。但是，对于DOCTYPE xhtml，您的序列化DOM节点必须在插入文档之前清除some additional cases。根据{{​​3}}，包含Attr节点，Text节点，CDATASection节点，Comment节点或ProcessingInstruction节点的序列化DOM节点数据包含与XML Char生成不匹配的字符（包括U + 003A COLON“：”）必须引发INVALID_STATE_ERR异常。

W3.org还指定用户代理在XML（XHTML）上下文中的innerHTML和HTMLElements上设置HTMLDocuments 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>');

W3

Answer 2

逃离冒号：

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

Answer 3

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