W3C shows html markup in javascript as an error

Question

Getting an error in W3C validator. I append a html statement using query. However, I get this error in W3C:

character "'" is not allowed in the value of attribute "id"

 $('<tr id="condition' + num + '" class="clonedInput" ><td class="first-colu… 

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

My code is as follows

    $('<tr id="condition' + num + '" class="clonedInput" ><td class="first-column">&nbsp;</td>
<td><span style="float:left; padding-right: 10px;"><select id="conCol' + num + '" 
name="conCol' + num + '" class="standard_select" style="width:147px; background:#fff;">
<option>Telephone Number</option><option>Mobile Number</option><option>Fax Number</option>
<option>iPhone Number</option><option>BB Messenger Id</option><option>Skype Name</option>
<option>Google Talk Id</option><option>MSN Messenger Id</option></select></td>
</tr>').appendTo('#addContact');

Answer 1

Place your javascript code in an external file (not inline or in head script block), or include in a CDATA block:

<script type="text/javascript">
<![CDATA[
function addRow()
{
    //do stuff
    $('<tr id="condition' + num + '" class="clonedInput" ><td class="first-colu…
}
]]>
</script>

Answer 2

The W3C validator is only meant to validate your final X/HTML markup. It appears that you are pasting your source code into the validator, which includes javascript statements.

The validator is failing because it doesn't execute javascript, it just assumes your entire document is markup and sees a tr element with an id of condition' + num + ' , which indeed would be an error, if it was straight HTML.

EDIT

I would refer to @BobDavies answer for how to rectify your issue; In retrospect, I've only explained why you're getting the error.