Fix a warning thrown by HTML Validator

Question

Hi
I have some JavaScript code in my php website.
This code uses jQuery, and builds a < select > menu using ajax calls.

Here is the code

sel.append('<option value="' + data[i].id + '">' + data[i].nombre + '</option>');

And this gives me the following warning

line 240 column 82 - Warning: '<' + '/' + letter not allowed here

Does anyone know how can I fix this warning, so my html validates? Thanks

Answer 1

Put the javascript in an external file.

Answer 2

Put <!-- and --> around your code.

Answer 3

If you are writing javascript in the html/xhtml page, you can enclose the javascript in CDATA

<script type="text/javascript">
/* <![CDATA[ */
console.log("..js code here..");
/* ]]> */
</script>

Answer 4

To include code which isn't encoded as XML in an XHTML document (and I'm guessing that's what you're trying to do) you need to do something like the following:

<script type="text/javascript">
//<![CDATA[

alert("<This is now valid XHTML>");

//]]>
</script>

Answer 5

The issue is that any </ sequence — known as ETAGO — ends a CDATA element such as a <script>. You can get away with </ in browsers but not </script.

The simplest workaround is to break up the </ sequence with a backslash-escape:

sel.append('<option value="' + data[i].id + '">' + data[i].nombre + '<\/option>');

However this line still has problems, because you aren't HTML-escaping your id and nombre values. If they may contain <, & or ", you've just built yourself a client-side XSS vulnerability!

So either HTML-escape your text values before putting them into strings, or, perhaps simpler, just use the standard DOM:

sel.append(new Option(data[i].nombre, data[i].id));