Syntax error with jQuery append

Question

My code is as follows:

        <script>
        var i = 2;
        $("document").ready(function(){
            $("#newrow").click(function(){
                $("#maintable").append('<tr>
                                        <td><input type="text" name="dept_" + i size="5" maxlength="5" /></td>
                                        <td><input type="text" name="hours_" + i size="5" maxlength="1" /></td>
                                    </tr>');
            });
            i = i + 1;
        });
    </script>

Whenever I run it, JavaScript gives me an "Uncaught SyntaxError: Unexpected Token ILLEGAL" on the $("#maintable").append line.

For the life of me, I can't figure out what the syntax error is.

It's not a problem with the actual element being appended, because I tried just '<td></td>' as well and that got the same error.

Dennis · Accepted Answer · 2012-03-31 00:03:32Z

13

You can't break a string over multiples lines without special treatment. Either put it all on one line, or escape the newlines with backslashes:

'<tr>\
     <td><input type="text" name="dept_"' + i + ' size="5" maxlength="5" /></td>\
     <td><input type="text" name="hours_"' + i + ' size="5" maxlength="1" /></td>\
</tr>'

answered Mar 31, 2012 at 0:03

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2012-03-31 00:08:36Z

2

<script>
    var i = 2;
    $(document).ready(function(){
        $("#newrow").click(function(){
            var html = '<tr>';
                html += '<td><input type="text" name="dept_"'+i+' size="5" maxlength="5" /></td>';
                html += '<td><input type="text" name="hours_"'+i+' size="5" maxlength="1" /></td>';
                html += '</tr>'
            $("#maintable").append(html);
        });
        i++;
    });
</script>

document does not have quotes, right now your "ready" function does not work! The variable "i" is not added at all! A string can't be divided over multiple lines unless you use newlines, add to a variable, or something similar.

answered Mar 31, 2012 at 0:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

6 Comments

Andrew Latham Over a year ago

It's working fine with the quotes still there. I actually realized after downvoting that that was a little harsh, but StackOverflow won't let me undo it. Edit: Figured out how.

adeneo Over a year ago

Actually, it will work, so my answer is somewhat wrong, but there is no reason for the quotes when referencing the document or window, and in my opinion you should not have the quotes there!

Dennis Over a year ago

What version of jQuery lets you select with $("document")?

adeneo Over a year ago

@Dennis - It will actually work, FIDDLE, but it just does'nt seem like a good idea, as that would make it a string, and not the native JS document variable, or atleast so I think?

Dennis Over a year ago

To quote the documentation: The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted. "document" will not actually select anything but apparently that doesn't matter.

|

Collectives™ on Stack Overflow

Syntax error with jQuery append

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related