Trying to add a div to an append statement via a + and getting OBJECT OBJECT (jquery)

Question

$('#columnList').append("<li>" + $(colInProcID) + "</li>");

Obviously, Im doing something wrong...not sure how to say the above so that I dont get [object object] in my list.

**Sorry, let me clarify ... the $(colInProcID) is a DIV that I want inserted into the list. (sorry)

Answer 1

$(colInProcID)

is a jQuery object, not a string. You'll need to specify which of the potentially many matches you want.

EDIT:

Remember that in the browser, while it's true that everything is textual (obviously negating images), what we work with in javascript are objects, such as a div object holding a text span or a paragraph or whatever. So when you grab it with jQuery via a selector, it's now a jQuery object wrapping another object (even if that target object is a string).

So, you have to either remove the reference to the jQuery object (by calling a array reference or what have you) or you have to use direct XHTML/XML/HTML inside your call.

$('#columnList').append("<li>" + $(colInProcID) + "</li>");

into

var stringToInsert = "<div><p>sometext</p></div>";
$('#columnList').append("<li>" + stringToInsert + "</li>");

or perhaps

var stringToInsert = $(colInProcID)[0];
$('#columnList').append("<li>" + stringToInsert + "</li>");

or someone suggested .get(0) which I think works too.

You have to remember the part about anything grabbed with a selector $(colInProcID) or $("#SomeDivToUse") is a jQuery object, not an XML object or a string.

Hope this clarified things just a tad, and helped you out.

Answer 2

I think it's:

$( colInProcID ).wrap('li').appendTo('#columnList');

What is colInProcID?

Answer 3

Here is what I used to get the DIV into the list

$('#columnList').append("<li id='appendedLI'>");
$(colInProcID).appendTo('#appendedLI');

I tried the .wrap function and thought it was going to work but for some reason, the LI never showed up in FF3 or IE7.