javascript - Injecting a tag having an attribute with colon in it using jquery -
i'm trying inject below span in div using jquery.
html: <span epub:type="pagebreak" id="pageprefix" title="1"></span> js: $('div').html('<span epub:type="pagebreak" id="pageprefix" title="1"></span>');
and getting following error, syntaxerror: dom exception 12
any workaround this?
jquery uses innerhtml
when pass serialized dom nodes $('div').html()
. works fine long doctype
flavor of html
. however, doctype
of xhtml
serialized dom nodes must clear some additional cases before being inserted document. according w3.org, serialized dom node containing attr
node, text
node, cdatasection
node, comment
node, or processinginstruction
node data contains characters not matched xml char production (including u+003a colon ":") must raise invalid_state_err
exception.
the w3 specifies algorithm user agents must run when setting innerhtml
dom attribute on htmlelements
, htmldocuments
in xml(xhtml) context. step 2 in algorithm is:
if
innerhtml
attribute being set on element, user agent must feed parser created string corresponding start tag of element, declaring namespace prefixes in scope on element in dom, declaring default namespace (if any) in scope on element in dom.
the user agent doesn't know you've specified epub
namespace on parent element because current context outside root context. therefore need specify namespace serialized dom nodes when append dom.
$('div').html('<span xmlns:epub="http://www.idpf.org/2007/ops" epub:type="pagebreak" id="pageprefix" title="1"></span>');
Comments
Post a Comment