How can I place HTML in a JavaScript string and have it validate?

Question

I want to show different css files depending on browser that user is using. I want to do this on JS and on client side. I am using code like this.

 <script language="javascript" type="text/javascript">
 if ((navigator.userAgent.indexOf("MSIE")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.IE.css\" type=\"text/css\" 
 }
 if ((navigator.userAgent.indexOf("Chrom")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.chrome.css\" type=\"text/css\" />");
 }

*The only problem that I this code is not valid. How I can solve the problem. If I check this document with w3 checker. it will show now: Line 22, Column 90: document type does not allow element "link" here*****

…nt.write("<link rel='stylesheet' href='css/common.IE.css' type='text/css' />");

Line 25, Column 35: an attribute value must be a literal unless it contains only name characters

document.write("<link rel=\"stylesheet\" href=\"css/common.chrome.css\"…

What about user agents that don't support JavaScript or who have it turned off? (which is getting more and more common) This seems like something that should be done server-side. — xj9
– xj9, Commented Jul 25, 2010 at 4:39

alex · Accepted Answer · 2010-07-24 23:53:58Z

3

Wrap that block in CDATA tags.

So it looks like like...

<script language="javascript" type="text/javascript">
<![CDATA[
 if ((navigator.userAgent.indexOf("MSIE")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.IE.css\" type=\"text/css\" 
 }
 if ((navigator.userAgent.indexOf("Chrom")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.chrome.css\" type=\"text/css\" />");
 }
]]>
<script>

answered Jul 24, 2010 at 23:53

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

meder omuraliev · Accepted Answer · 2010-07-24 23:57:36Z

3

Bad idea. Can you tell us your real issues which are causing you to serve different stylesheets to different browsers?

You should strive to serve all browsers with one stylesheet, and maybe an additional to IE with CondComs ( sounds like condoms ).

answered Jul 24, 2010 at 23:57

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

1 Comment

alex Over a year ago

Haha, we do need protection from IE :P

Gabriele Petrioli · Accepted Answer · 2010-07-24 23:54:41Z

2

break it up in sub-strings so that it does not get detected ..

document.write("<l" + "ink ...

or add comments like this

<script type="text/javascript">
//<!--

if ((navigator.userAgent.indexOf("MSIE")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.IE.css\" type=\"text/css\" 
 }
 if ((navigator.userAgent.indexOf("Chrom")) >= "0"){
    document.write("<link rel=\"stylesheet\" href=\"css/common.chrome.css\" type=\"text/css\" />");
 }


//-->
</script>

answered Jul 24, 2010 at 23:54

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

alex Over a year ago

The first one is kind of a backwards approach for readability when there are modern solutions available. Also, I think CDATA is the best way to wrap it, rather than use the old style JavaScript commented out HTML comments.

Collectives™ on Stack Overflow

How can I place HTML in a JavaScript string and have it validate?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related