javascript create string by + " "+

Question

$("body").append( "<p id='Zoom'>Send to: <b>" 
 + full + "</b> <div id='fb-root'></div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:send href='"
 + link + " font='' colorscheme='dark'></fb:send><br> <textarea cols='40' rows='7'>"
 + msg + "</textarea></p>"
 );

What is wrong with this JavaScript code? Can't I have a script block between ""? How can I fix this?

• vol7ron: Well the code is ugly and not formatted... i'll help fix it.

Answer 1

It is common to do something like this:

"<scr" + "ipt>...</scr" + "ipt>";

• user447356: Also missing quote for the <fb:send> href attribute.
• user166390: There is actually nothing wrong with "<script>" inside a <script> and it will be correctly treated as a continuation of the JavaScript code by the browser. The only issues is a "</script>" (which the post also contains) outside of a CDATA section (or a CDATA terminator inside a CDATA section...)

Answer 2

Having the sequence of characters </script inside a script block ends the script block. HTML parsers know nothing about JavaScript string literal syntax, they just say everything between the <script> start-tag and the first </script> end-tag afterwards is a script element.

Use '<\/script>', or '\x3C/script>' or similar to avoid putting < and / characters next to each other. You also commonly see unescape('%3C/script>'), but that's a pretty pointless roundabout way of doing it. '</scr'+'ipt' is also common, but not valid; technically even just the two-character sequence </ (ETAGO) is supposed to end the script block, but browsers typically give you some latitude. '<'+'/script' would be valid.

However, as patrick said, writing <script> elements into innerHTML (as you are doing here with jQuery's append()) doesn't work (and doesn't really make much sense). Normally you'd be better off using DOM-like methods to add elements to the page, and getScript to dynamically load scripts, however with third-party scripts like this it's not certain whether even that will work. If an external script relies on document.write, for example, it's never going to be possible to load it dynamically. Others may get tripped up by looking for their own script tag. Some trial and error may be necessary.

"<textarea cols='40' rows='7'>"+msg+"</textarea>"

Don't do stuff like this. Throwing text into HTML strings without escaping the <&"s is a recipe for XSS security holes and bugs. jQuery has good DOM-style content creation tools, use them, eg:

$('<textarea/>', {cols: 40, rows: 7, val: msg})

• Mike Samuel: ETAGO does not end the script block in HTML 5. The rawtext end tag name state rules specify that a rawtext element is only closed by an appropriate end tag token which for <script> is </script>.
• bobince: Well, </script, anyway, possibly followed by >, some whitespace, or other random questionable stuff. HTML5 is trying to standardise what browsers have more-or-less always done, although the historical baggage of subtle browser differences here is fairly horrendous. (And the Working Draft totally unreadable; "here's Mozilla's parser, turned into English less readable than the source code it's based on"...) Best to be HTML4-valid here, in practice.
• Mike Samuel: When you say "technically", you are being technical w.r.t. a standard that was never followed in this respect and which has been superseded by one that specifies </script...> as the end token. I do agree with you that it is best to be safe, just that your use of "technically" is only technically correct in a narrow and misleading way.
• bobince: It's too early to say HTML5 has superceded HTML4 as definitive. We're still way back at Working Draft status, and the spec contains a lot of features that browsers don't come close to supporting yet. For safety and compatibility, validating to HTML4 has a lot to recommend it (not to mention that it's much easier to validate).

Answer 3

You have a couple of issues.

1. jQuery sanitizes <script> elements away when appending.
2. You can't have <div> elements (or other display:block elements) nested inside <p> elements.

Change the <div> to an inline element, and use the jQuery.getScript()^[docs] method to load the script.

Answer 4

You should enclose the JS in a CDATA block, if you're going to be using HTML tags in your JS.

<script type="text/javascript">
 // <![CDATA[
 $("body").append( '<p id="Zoom">Send to: '
 + '<b>' + full + '</b>'
 + '<div id="fb-root"></div>'
 + '<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>'
 + '<fb:send href="' + link + ' font="" colorscheme="dark"></fb:send>'
 + '<br><textarea cols="40" rows="7">' + msg + '</textarea>'
 + '</p>'
 );
 // ]]>
</script>

• user166390: Does CDATA work in HTML or is it an XHTML-ish construct? (In any case, it still leaves "]]>" to be guarded...)
• vol7ron: I typically program in XHTML Strict, so I think the above is for that. If you wanted HTML only, I think you use // <!-- <![CDATA[ and // ]]> -->. Someone please check me on that

Answer 5

Completing Larsenal's answer, this sould work:

$("body").append("<p id='Zoom'>Send to: <b>" + full + "</b> <div id='fb-root'></div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></scr" + "ipt><fb:send href='" + link + " font='' colorscheme='dark'></fb:send><br> <textarea cols='40' rows='7'>" + msg + "</textarea></p>");