jQuery inserting children first when using append() instead of last-CodePudding

I'm having trouble inserting child elements to a list in HTML using jQuery. I'm a beginner when it comes to anything JavaScript related so my code is probably very clunky and unoptimized. Even if you can't help me with the original issue I always appriciate pointers to improve my code and learn.

I have a function that runs every second (it's called from my CefSharp application, not sure if it's relevant). This is my function:

function updateOrderQueue(index, reference, pickedup, deliveredto, robotId, statuscode, statustext) {
    var list = $('#orderQueueList');
    var count = $("#orderQueueList li").length;

    if (!document.getElementById('order'   reference) && statuscode < 4 && count < 10) {
        var data = $(`<li  id="order`   reference   `">
                        <h3  id="text`  reference   `">
                            [` index `] `  pickedup   ` ➔ `   deliveredto   ` (`   statustext    `)
                        </h3>
                        <small  style="font-size:24px;" id="robotQueue`  reference   `">`   robotId   `</small>
                    </li>`);
        list.append(data).hide().fadeIn(500);
    } else {
        var locations = jQuery("#text"   jq(reference));
        var assignedrobot = jQuery("#robotQueue"   jq(reference));

        locations.text('[' index '] '  pickedup   ' ➔ '   deliveredto   ' ('   statustext   ')');
        assignedrobot.text(robotId);
    }

    var elems = $('#orderQueueList li').detach().sort(function (a, b) {
        if (isNaN($(a).text()) || isNaN($(b).text())) {
            return $(a).text() > $(b).text() ? 1 : -1;
        }
        return $(a).text() - $(b).text();
    });
    list.append(elems);
}

And this is the HMTL code

<div id="orderQueue" >
   <ul  id="orderQueueList">
   </ul>
</div>

I'm going to try to quickly explain what I intend on it doing and what it actually does.

So basically, this code is supposed to add, sort and add relevant classes to items in a list. To be added, the item needs to pass a set of requirements (not already added, statuscode under 4 and not more than 10 items total). I then append the item into the list, which I assumed would put it at the end of the list (compared to prepend, which should do the opposite).

The problem is, whenever a new item is added, it is added to the top of the list. My guess is that is has something to do with the fact that I'm appending it to the ul. I tried doing something like $('#orderQueueList li:last') but I didn't get it to work. I've also tried to do $('#orderQueueList).children() and $('#orderQueueList).last() before appending without success.

What am I missing? Have I completely misunderstood what append does? Have I written the code wrong?

Appriciate any pointers,

Thank you in advance.

CodePudding user response：

The issue here is not the .append() but the .sort() which comes after.

Sorting text is affected by whitespace, so the solution is to .trim() the text when doing a text comparison:

$("ul").append("<li>new</li>").hide().fadeIn(500);
var elems = $('ul li').detach().sort(function(a, b) {
  if (isNaN($(a).text()) || isNaN($(b).text())) {
    return $(a).text().trim() > $(b).text().trim() ? 1 : -1;
  }
  return $(a).text() - $(b).text();
});
$("ul").append(elems);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>   2</li>
  <li>1555</li>
  <li>xyz</li>
  <li>3</li>
  <li>
  abc
  </li>
</ul>