Django/JQuery Syntax Error: I don't know why I am getting this error

Question

I am making a blog application using Django. In my post_save() function in post_edit.js , I have this post editt operation:

$.post(item.find("#post-form").attr("action") + "&ajax" , data, function(result) {
    if (result != "failure") {
        item.before($("li", result));
        item.remove();
        $("ul.posts .edit").click(post_edit);
    }

    else {
        alert("Failed to validate post before saving")
    }   
});

So after posting the blog data to my post_list.html template, the first line of the if block extracts li element from the result and inserts it before the "item" which is the original li element.

The problem is, after this operation is done, I get a JQuery Syntax Error:

Error: Syntax error, unrecognized expression: 
    <ul class="posts">
        <li>
            <a href="/post/1" class="title">NEW POST</a> 
            <a href="/save/?id=1" class="edit">[edit]</a> 
            <br /> Tags: 

            <ul class="tags">
                <li>
                    <a href="/tag/tag1">tag1</a>
                </li> 
                <li>
                    <a href="/tag/tag2">tag2</a>
                </li> 
            </ul> <br /> 
        </li> 
    </ul>

I am having trouble figuring out why I'm getting a syntax error, because the ul class="posts".../ul block looks completely fine to me. After debugging, I am pretty sure that it is the 3rd line (item.before($("li", result));) that is causing the problem.

Can someone please help me find the problem?

Thank you

+ Also, there's another confusion.

The "result" is the ul block:

ul class="posts">
    <li>
        <a class="title" href="/post/1">NEWPOST</a>
        <a class="edit" href="/save/?id=1">[edit]</a>
        <br> Tags:

        <ul class="tags">
            ...
        <br>
    </li>
</ul>

I thought the line item.before($("li", result)); is supposed to extract the "li" element from the result, but it looks like it is returning the whole "ul" block...

Answer 1

item.before($("li", result));

Should be

item.before($("li", $(result)));

Or, maybe

item.before($("li"), result));

Depends on what are you trying to achieve and your HTML structure.

The source of error is that second parameter to $ should be a DOM context or JQuery element to use as an element search tree top (ie only descendants are searched). With your code, you are trying to find li s under the htmlString , which is obviously an error. So, most likely it's just a missing or misplaced ) .

You should stick with first if you are trying to find li s inside the returned string. Use second if you are about to insert the returned html before li s.