missing ) after argument list? jQuery

Question

Using the code below I can insert a new row to my table (#courseelements).

$("#addbutton").click(function() {
      $('#courseelements > tbody:last').append('<tr><td>Helloworld</td></tr>');
    });

However, I'd like to replace the Helloworld with a <select> element. So something like this:

$("#addbutton").click(function() {
      $('#courseelements > tbody:last').append('<tr><td>

        <select class='plan_id'>
            <option value='1'>Description</option>
            <option value='2'>Description</option>
            <option value='3'>Description</option>  
        </select>


      </td></tr>');
    });

But this gives me "missing ) after argument list" on the first apostrophe ' <select class='

Any ideas why?

Answer 1

You forgot to escape quotes:

$("#addbutton").click(function() {
  $('#courseelements > tbody:last').append('<tr><td>

    <select class=\'plan_id\'>
        <option value=\'1\'>Description</option>
        <option value=\'2\'>Description</option>
        <option value=\'3\'>Description</option>  
    </select>


  </td></tr>');
});

As alternative you can wrap whole appended string in double quotes insetead of single quotes:

$("#addbutton").click(function() {
  $('#courseelements > tbody:last').append("<tr><td>

    <select class='plan_id'>
        <option value='1'>Description</option>
        <option value='2'>Description</option>
        <option value='3'>Description</option>  
    </select>


  </td></tr>");
});

Answer 2

You need to use a different quote type for the quotes inside your HTML than you do for the quotes surrounding the HTML:

$("#addbutton").click(function() {
      $('#courseelements > tbody:last').append("<tr><td>

        <select class='plan_id'>
            <option value='1'>Description</option>
            <option value='2'>Description</option>
            <option value='3'>Description</option>  
        </select>


      </td></tr>");
    });