Add list item with attributes in Jquery

Question

I am trying to add a list item with attributes but every time I run it I get an error. Do you know guys what is the syntax issue with my code?

<div class="subway-map" data-columns="12" data-rows="10" data-cellSize="40" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="true" data-lineWidth="8">
    <ul data-color="#ff4db2" data-label="jQuery Widgets">          
        <li data-coords="2,2"><a href="#">North Ave</a></li>
        <li data-coords="4,2"><a href="#">South</a></li>
        <li data-coords="6,2"><a href="#">West</a></li>
    </ul>

    <ul data-color="red" data-label="jQuery Interactions" class="map2></ul>
</div>      

$(".subway-map").subwayMap({ debug: true });
$(".map2").append("<li data-coords="2,4">Test</li>"); // This is the issue

Answer 1

The problem is because you delimit the string literal with double quotes and use double quotes within the string. You can fix this by using single quotes around the string itself. Try this:

$(".map2").append('<li data-coords="2,4">Test</li>');

Alternatively you can use double quotes for both, but you need to escape them with a \ within the string:

$(".map2").append("<li data-coords=\"2,4\">Test</li>");

I would suggest you look in to using an editor with syntax highlighting as it makes it almost impossible to miss errors like this.

Answer 2

As stated here:

If you are using one form of quote in the string, you might want to use the other as the literal.

Your inner double quotes in append is breaking the string. replace them with single quotes to handle it correctly:

 $(".map2").append("<li data-coords='2,4'>Test</li>");

Answer 3

You have " inside " without proper escaping or concatenation.

replace

 $(".map2").append("<li data-coords="2,4">Test</li>"); // <---This is the issue

with

 $(".map2").append('<li data-coords="2,4">Test</li>'); 

or

 $(".map2").append("<li data-coords=\"2,4\">Test</li>");

Answer 4

there is issue with double quotes, use single quote instead.Try this:

$(".map2").append("<li data-coords='2,4'>Test</li>");

Answer 5

You can use this

$(".map2").append("<li data-coords='2,4'>Test</li>");

OR

$(".map2").append('<li data-coords="2,4">Test</li>');