954,593 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

CDATA in HTML

I'm trying to put some text which will confuse HTML parser inside the CDATA section for javascript to access. But seems it won't work in both firefox and Internet Explorer. In Firefix, it will treat it as comment, it's still possible to remove the go get back the original content, in IE it's worse, CDATA seems be totally ignored. No way to get the content back.

<html>
<body>
<div id="test"><![CDATA[Testing Data here]]></div>
</body>
</html>
<script>
alert(document.getElementById("test").innerHTML );
alert(document.getElementById("test").firstChild.data);
</script>


Anybody has some idea to get back the CDATA in the HTML using javascript?

Thanks

jianwu_chen
Newbie Poster
6 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 

Don't embed scripts. Call functions in external scripts instead.

Your quotes need to be escaped.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

thanks for the reply. But maybe you mis-understand my issue.

Here my problem is not the javascript code itself. But the java script can't assess the data inside

jianwu_chen
Newbie Poster
6 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 

thanks for the reply. But maybe you mis-understand my issue.

Here my problem is not the javascript code itself. But the java script can't assess the data inside

Test it with XHTML and see if you get anything.

digital-ether
Nearly a Posting Virtuoso
Moderator
1,293 posts since Sep 2005
Reputation Points: 461
Solved Threads: 101
 

If you need data constants, put them in the script, not in the HTML.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 
If you need data constants, put them in the script, not in the HTML.

The reason i want to put it in CDATA, is that I want to put some template html data which may include many lines of HTML source. While it's possible to put the whole template inside the javascript string, but it's quite ugly as i have to use the code like: "line1\n" + "line2" + ....., and if i have single or double quote inside the template, i have escape that, which will make the javascript code more ugly. I just want a cleaner way to let javascript read the template from some external source.

jianwu_chen
Newbie Poster
6 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 
The reason i want to put it in CDATA, is that I want to put some template html data which may include many lines of HTML source. While it's possible to put the whole template inside the javascript string, but it's quite ugly as i have to use the code like: "line1\n" + "line2" + ....., and if i have single or double quote inside the template, i have escape that, which will make the javascript code more ugly. I just want a cleaner way to let javascript read the template from some external source.

You can place the data in a separate file and load it into the page later using XMLHttpRequest or similar, if you don't need it right away.

You can place it in the HTML of the page and apply a CSS style to hide it.

<div style="display:none;">data here...</div>
digital-ether
Nearly a Posting Virtuoso
Moderator
1,293 posts since Sep 2005
Reputation Points: 461
Solved Threads: 101
 

You can place the data in a separate file and load it into the page later using XMLHttpRequest or similar, if you don't need it right away.

You can place it in the HTML of the page and apply a CSS style to hide it.

<div style="display:none;">data here...</div>

You are right. I do use XMLHttpRequest, in case that the template is only required during runtime depends on users interaction. But for some templates which are always necessary to be loaded together with the master HTML. The AJAX way is not efficient and also increases the code complexity with no benifits. That's why I want a easier way.

I do use tag for that. It's ok for most of the HTML templates. But somehow, if there are special characters inside the template such as "<", "#" etc, the HTML parser will build up a wrong DOM which causes problems, i also don't want put a lot of XML entities such as < which is really ugly. that's why I want to use CDATA tag inside the above tag to prevent HTML parser manipulate the content of the template. But seems this is not a solution as HTML parser won't interprete CDATA correctly for most of browsers, even I use XHTML.

jianwu_chen
Newbie Poster
6 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 

One way to do it is to wrap the HTML for your template in a

owenoak
Newbie Poster
1 post since Jan 2009
Reputation Points: 10
Solved Threads: 0
 

One solution for that is to put the data between and make it hidden.

jianwu_chen
Newbie Poster
6 posts since Jan 2008
Reputation Points: 10
Solved Threads: 0
 
<![CDATA[
content  goes here
]]>
crabos
Newbie Poster
1 post since Sep 2009
Reputation Points: 10
Solved Threads: 0
 

Just do what I do. Use PHP which is made for situations such as this.

julesmanson
Newbie Poster
2 posts since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You