How to wrap some html with a CDATA tag in jquery?

Question

How do you wrap some html in a element in a CDATA tag so it become 'sterilized' so to speak...

I've tried...

$(this).html( "<![CDATA[" + $(this).html() + "]]>" );

and

$(this).wrap("CDATA");

The first wraps it in save html entities so it's not a CDATA tag. And the second doesn't work.

Thanks.

Answer 1

Browsers only support CDATA markers in XHTML, so you need to:

1. Write XHTML.
2. Serve it as Content-Type: application/xhtml+xml so the browser doesn't push it through an HTML parser anyway.

(I only tested the above on Chrome, you can see the results).

You'd be better off getting the browser to treat it as text instead of as HTML:

$(this).text( $(this).html() );