jQuery append not working

Question

I'm having a slight error with jQuery $([selector]).append(element),

var Site_Id = 119;
var iLi = document.createElement("li");
iLi.setAttribute("class", "hidden site_id_"+Site_Id);
iLi.setAttribute("name", "ArticleType["+Site_Id+"]");
console.log(iLi)
$(".level-2 div row_group_off").append(iLi); 

For some reason the DOMm is throwing an Exception with jQuery calling it

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: {path_removed} :: <TOP_LEVEL> :: line 12" data: no]

So with that I added the console.log that's in my code above I'm getting

<li class="hidden site_id_151" name="ArticleType[151]">

this would mean that the element is being created as a very valid HTMLLiElement but for some reason jQuery is unable to append it to my UL .level-2 div row_group_off

Answer 1

First: Why do you mix up vanilla Javascript with jQuery in that way?

I'd go for it, like

$('<li>', {
    'class':    'hidden site_id_' + Site_Id,
    'name':     'ArticleType[' + Site_Id + ']'
}).appendTo( '.level-2 div row_group_off' );

Of course, row_group_off must be an <ul> element. In the current form, jQuery will try to query a node with the name *row_group_off* which hopefully doesn't exist. So you either did forget a # or . to query for an id or class -name

Answer 2

Try:

$(".level-2 div .row_group_off").append(iLi);

Or

$(".level-2 div #row_group_off").append(iLi);

Or

$(".level-2 div.row_group_off").append(iLi);

Or

$(".level-2 div#row_group_off").append(iLi);