jQuery append li, unexpected token ILLEGAL

Question

I am trying to append a new list item based on a condition using jquery. For reference the page is a Wordpress page and i have been able to implement serval jquery scripts using same format.

Here is the sample HTML.

<div class = "bag" id = "bag" style="width: 100%; padding: 0 0 0 5px; float: left;">
<ul id = "clubsli" name = "clubsli" class = "clubsli">

I dynamically create a li with "n" values and want to append a new li to the end of this list using JavaScript/jQuery script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        function addClub() {
            $roleint = 2613;
            $count = $("#clubsli li").length - 1;
            if ($roleint == 2613) {
                if ($count < 100) {
                    $("#bag ul").append('<li>$roleinit</li>');
                };
            };
        };
    });
</script>

No matter what I do I get the following Unexpected token ILLEGAL error that seems to not like the "<" in the list element.

Here is the error I receive.

I've tried appending a non-li and can without fail and tried "appendTo" but get same error on the "<".

Answer 1

Your code is basically okay. Here's a working JSFiddle version of it, with the following problems or incompletenesses corrected:

$(document).ready(function () {
    function addClub() {
        $roleint = 2613;
        $count = $("#clubsli li").length - 1;
        if ($roleint == 2613) {
            if ($count < 100) {
                $("#bag ul").append('<li>' + $roleint + '</li>');
            };
        };
    };
    addClub();
});

• You needed to use the string appending operator + in your appended string.
• You'd typo'd $roleint as $roleinit in your append()
• You'd declared the addClub() function, but not actually called it. I presume it was being called somewhere else in your code?

In addition, as Guido points out, it's quite odd to use variable names starting with $ in jQuery unless the variable is actually a jQuery object, so that makes your code read quite strangely.

I don't think any of this would have caused the error in your question, though, so perhaps there's something else going on that we can't see from your description?

Answer 2

Problem solved! Similar post on WordPress specific stackexchange shows how to edit functions.php so WP does not auto-insert page breaks.

https://wordpress.stackexchange.com/questions/101368/wordspress-add-p-into-my-javascripts

Thanks to those that helped clarify what was causing the problem for me. Gave me better idea on where to look.