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

Question

I'm trying to inject below span in a 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 the following error, SyntaxError: DOM Exception 12

any workaround this?

change epub:type to epub-type.. or to be strict with html use data-epub-type — Vishal Sharma, Apr 05 '13 at 13:06

score 5 · Accepted Answer · answered Apr 10 '13 at 03:31

jQuery uses innerHTML when you pass serialized DOM nodes to $('div').html(). This works fine as long as your DOCTYPE is any flavor of html. However, with the DOCTYPE of xhtml your serialized DOM nodes must clear some additional cases before being inserted into the document. According to W3.org, a serialized DOM node containing an Attr node, Text node, CDATASection node, Comment node, or ProcessingInstruction node whose data contains characters that are not matched by the XML Char production (including U+003A COLON ":") must raise an INVALID_STATE_ERR exception.

The W3 also specifies the algorithm that user agents must run when setting the innerHTML DOM attribute on HTMLElements and HTMLDocuments in an XML(XHTML) context. Step 2 in that algorithm is:

If the innerHTML attribute is being set on an element, the user agent must feed the parser just created the string corresponding to the start tag of that element, declaring all the namespace prefixes that are in scope on that element in the DOM, as well as declaring the default namespace (if any) that is in scope on that element in the DOM.

The user agent doesn't know that you've specified the epub namespace on a parent element because the current context is outside the root context. Therefore you need to specify the namespace for the serialized DOM nodes when you append to the DOM.

$('div').html('<span xmlns:epub="http://www.idpf.org/2007/ops" 
        epub:type="pagebreak" id="pagePrefix" title="1"></span>');

jsFiddle here.

score 3 · Answer 2 · answered Apr 05 '13 at 13:05

3

Escape the colon:

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

answered Apr 05 '13 at 13:05

Blazemonger

90,923
26
142
180

its not working because the page i'm running the jquery code is xhtml.. any other way? – codef0rmer Apr 05 '13 at 13:34
How is it failing? What are you getting out instead? Escaping the character should only be of interest to JavaScript. – Blazemonger Apr 05 '13 at 14:11
I tried renaming the page from .xhtml to .html and remove `` and your code starts working. But i can not rename the page to html. so what to do? – codef0rmer Apr 08 '13 at 06:58
Perhaps [this](http://stackoverflow.com/q/4825920/901048) or [this](http://stackoverflow.com/q/853740/901048) will help? I searched for "xml jquery attribute colon" and got a few more results. – Blazemonger Apr 08 '13 at 13:14
nothing helped. I think we can not inject dom having colon in them using jquery html() for xhtml page. – codef0rmer Apr 09 '13 at 07:43
I wish I could give you two votes for this tip! escaping the colon solved my problem of trying to remove attributes with colon such as xmlns:xlink – CodeToad May 21 '14 at 14:17

score 1 · Answer 3 · answered Apr 05 '13 at 13:08

1

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

answered Apr 05 '13 at 13:08

kgautron

7,915
9
39
60

i can not separate all attributes as I'm getting a huge html data from a service. – codef0rmer Apr 05 '13 at 13:17

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

3 Answers3