issue with jquery .append function

Question

i am trying to append some html content to a div.

here is my jquery script

jQuery( "#navigation" ).append('<li><a class="nop" href="#"><i class="social fa fa-2x fa-facebook"></i></a></li>
    <li><a class="nop" href="#"><i class="social fa fa-2x fa-twitter"></i></a></li>
    <li><a class="nop" href="#"><i class="social fa fa-2x fa-google-plus"></i></a></li>');

but this not working. showing some error. please help me. Thanks

see if your code is absolutely inlined then there should not be any error. — Jai, Dec 31 '14 at 11:02
error in firefox : SyntaxError: unterminated string literal $( "#navigation" ).append( "
It's never good to just write _showing some error_. If you want to get an answer and won't get downvoted for a low quality question you should always provide **all** relevant information. — t3chb0t, Dec 31 '14 at 11:11
possible duplicate of [SyntaxError: unterminated string literal strange error](http://stackoverflow.com/questions/14170153/syntaxerror-unterminated-string-literal-strange-error) — t3chb0t, Dec 31 '14 at 11:13
See also this question [How do I break a string across more than one line of code in JavaScript?](http://stackoverflow.com/questions/508269/how-do-i-break-a-string-across-more-than-one-line-of-code-in-javascript) — t3chb0t, Dec 31 '14 at 11:14

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

remove this:

});

You don't need the }); brace there.

Update:

As question has updated, then you can try the below one.

you can create your list items by concatenation this way:

jQuery(function(){
   var lists = '<li><a class="nop" href="#"><i class="social fa fa-2x fa-facebook"></i></a></li>'+
               '<li><a class="nop" href="#"><i class="social fa fa-2x fa-twitter"></i></a></li>' +
               '<li><a class="nop" href="#"><i class="social fa fa-2x fa-google-plus"></i></a></li>';

   jQuery("#navigation").append(lists);
}); // doc ready closed

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 31 '14 at 11:03

Jai

74,255
12
74
103

please check. question edited – user3706231 Dec 31 '14 at 11:07
you can check the updated one and make sure if your page has loaded the jQuery. – Jai Dec 31 '14 at 11:10

score 0 · Answer 2 · answered Dec 31 '14 at 11:03

0

Your code is wrong, you have some '});' without need.

$( "#navigation" ).append('<li><a class="nop" href="#"><i class="social fa fa-2x fa-facebook"></i></a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-twitter"></i></a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-google-plus"></i></a></li>');

http://jsfiddle.net/qbvw1a93/3/

answered Dec 31 '14 at 11:03

hiero

220
2
10

please check. question edited – user3706231 Dec 31 '14 at 11:06

score 0 · Accepted Answer · answered Dec 31 '14 at 11:03

0

You have to remove the last });

jQuery( "#navigation" ).append('<li><a class="nop" href="#"><i class="social fa fa-2x fa-facebook"></i>test</a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-twitter"></i>test</a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-google-plus"></i>test</a></li>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navigation"></div>

answered Dec 31 '14 at 11:03

kapantzak

11,610
4
39
61

sorry, that typo error. quetion edited. removed }); still error :( – user3706231 Dec 31 '14 at 11:06

score 0 · Answer 4 · answered Dec 31 '14 at 11:13

Here is my solution:

$("#navigation").html($('#navigation').html() + '<li><a class="nop" href="#"><i class="social fa fa-2x fa-facebook"></i></a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-twitter"></i></a></li><li><a class="nop" href="#"><i class="social fa fa-2x fa-google-plus"></i></a></li>');

Although your problem relies on the ILLEGAL line break inside the strings, something you can't do inside javascript.

issue with jquery .append function

4 Answers4

Update: