使用jquery注入一个带有冒号属性的标签

Injecting a tag having an attribute with colon in it using jquery

本文关键字：属性 标签 一个 注入 jquery 使用      更新时间：2023-09-26

我正在尝试使用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

有解决这个问题的方法吗?

当你将序列化的DOM节点传递给$('div').html()时，jQuery使用innerHTML。只要您的DOCTYPE是html的任何类型，这就可以正常工作。但是，对于xhtml的DOCTYPE，序列化的DOM节点必须在插入到文档之前清除一些额外的情况。根据W3.org，包含Attr节点、Text节点、CDATASection节点、Comment节点或ProcessingInstruction节点的序列化DOM节点，其数据包含XML Char生成不匹配的字符(包括U+003A冒号":")，必须引发INVALID_STATE_ERR异常。

W3还指定了在XML(XHTML)上下文中对HTMLElements和HTMLDocuments设置innerHTML DOM属性时用户代理必须运行的算法。该算法的第二步是:

如果在元素上设置了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。

转义冒号:

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

$('div').append('<span />').attr('epub':type', 'pagebreak').attr('id', 'pagePrefix').attr('title', '1');
相关文章：