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>'); 

jsfiddle here.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -