I have a piece of html code ‘<a href=“http://…”>test</a>’ that I need to set into a javascript variable, which is later added to the HTML dom. But how do I do this correctly in a html page?
If I do the following:
<script type=“text/javascript”>
var html = ‘<a href=“http://…”>test</a>’;
alert(html);
</script>
I get the correct output in the alert, but the W3C validator complains.
If I do the following:
<script type=“text/javascript”>
var html = ‘<a href=“http://…”>test</a>’;
alert(html);
</script>
The W3C validator doesn’t complain but I get the wrong output (<a href=“http://…”>test</a> instead of <a href=“http://…”>test</a>)
How can I get a valid html page and still get the html code properly into my variable?
Nope. You can’t have the character pair ‘</’ (followed by a name-start character) between <script> and </script> in HTML. That’s due to how the content model (CDATA) for that element is declared. In real XHTML you can, but that’s unusable anyway.
So you need to escape it. The easiest way is to escape the ‘/’ by writing ‘<\\/’. That way you don’t get the pair ‘</’.
var html = '<a href="http://...">test<\\/a>';
For those who are interested:
An element whose content model is declared as CDATA in HTML is a bit special. It cannot contain child elements, and special characters like ‘<’ and ‘&’ lose their special meaning. Also, the first occurrence of the character pair ‘</’ plus a name-start character is treated as if it were </script>, thus closing the element.
In XHTML the content model for the script element type is (#PCDATA), which means special characters are recognised – and must be escaped – and only a real </script> end tag will close the element. But this requires that the XHTML is parsed as XML, so it doesn’t apply to pretend-XHTML served as text/html (which is invalid HTML, not XHTML).