Question

        var activeMsg=[];       // Active Users
        var noactiveMsg=[];     // Non-Active Users with a Pending Message
        var noactiveNomsg=[];       // Non-Active Users without a Pending Message

        $('div.chatmember').each(function() {
            currentMember=$(this);

            if($(this).children().children('div').hasClass('chatactivestatus_online')) {
                alert('online');
                activeMsg.push(currentMember);
            }
            if($(this).children().children('div').hasClass('chatactivestatus_offline')) {
                alert('offline');
                noactiveMsg.push(currentMember);
            }               
        });

        $.each(noactiveMsg, function(i, e){
             $('#chatCenterMembers').append(e.html());
         })

The above code is quering DOM structure that looks like this:

 <div id="chatCenterMembers">
   <div class="chatmember">
      <a class="ststusTitle">
         <div class="chatactivestatus_online"></div>

it all works except for currentMember=$(this);
I believe this should hold <div class="chatmember">

when I do the append at the end of the code above it doesn’t add <div class="chatmember"> back into the dom. It adds its children elements only.

Answer 1

So you issue is this line here:

$('#chatCenterMembers').append(e.html());

and more specifically: e.html()

Accourding to the jQuery spec for .html():

Get the HTML contents of the first element in the set of matched
elements.

which means that .html() returns the child contents of the selection, not the selection itself.

What you want to do, is just use .append(), this will append the entire selected div and not just it’s children