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?

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?

• javascript
• jquery
• xhtml

Share Improve this question Follow edited Apr 9, 2013 at 13:24 Blazemonger 93.1k2727 gold badges145145 silver badges181181 bronze badges asked Apr 5, 2013 at 13:04 codef0rmercodef0rmer 10.5k99 gold badges5454 silver badges7878 bronze badges 1

• change epub:type to epub-type.. or to be strict with html use data-epub-type – Vishal Sharma Commented Apr 5, 2013 at 13:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +100

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, 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/2007/ops" 
        epub:type="pagebreak" id="pagePrefix" title="1"></span>');

jsFiddle here.

Escape the colon:

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

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