"Uncaught Syntax Error : Unexpected token < " when using jQuery's append

Question

Here is a jsFiddle demo of my problem.

This jquery snippet adds 3 divs once a click event is fired. However, the console says "Uncaught Syntax Error : Unexpected token < ".

script

$('#e16').on('click', function(){
 $(this).append("<div id='e17' class='kim2bb'>Alcohol 0.2+</div>
                 <div id='e18' class='kim2bb'>Alcohol 1.0~2.0</div>
                 <div id='e19' class='kim2bb'>Alcohol 0.05~1.0</div>");
});

html

<div id="e16" class="kim2bb">Drunken Drive</div>

The problem is from line breaks after your `` Remove them and you will see that the code runs just fine. [demo](http://jsfiddle.net/dDFDx/) — Travis J, Jun 23 '13 at 23:24

score 6 · Accepted Answer · answered Jun 23 '13 at 23:24

6

You have a string broken over multiple lines:

$(this).append("<div id='e17' class='kim2bb'>Alcohol 0.2+</div>" +
                "<div id='e18' class='kim2bb'>Alcohol 1.0~2.0</div>" +
                "<div id='e19' class='kim2bb'>Alcohol 0.05~1.0</div>");

answered Jun 23 '13 at 23:24

Igor

15,833
1
27
32

this one is correct, thanks. – Deck Trout Jun 23 '13 at 23:26
You were faster :( So atleast maybe I get upvote :) – WooCaSh Jun 23 '13 at 23:26
jquery doesn't like multiple spaces? – Deck Trout Jun 23 '13 at 23:26
1

@DeckTrout - In essence, what you did was this: `$(this).append("
Alcohol 0.2+
;
Alcohol 1.0~2.0
;
Alcohol 0.05~1.0
");` And the exception was thrown when it encountered `<` on line 2 of this snippet. – Travis J Jun 23 '13 at 23:32

score 2 · Answer 2 · answered Jun 23 '13 at 23:25

Try this:

$(this).append("<div id='e17' class='kim2bb'>Alcohol 0.2+</div>" +
                        "<div id='e18' class='kim2bb'>Alcohol 1.0~2.0</div>" + 
                        "<div id='e19' class='kim2bb'>Alcohol 0.05~1.0</div>");

Pluses on end of line are important so just copy it and try.

"Uncaught Syntax Error : Unexpected token < " when using jQuery's append

2 Answers2