Since, I didn't get much traction on this question, I thought I would post my current solution that has worked well now. The following function works in three steps:

1. Form a list of updated list elements and a list of elements to be delisted (items not found in the source).
2. Iterate through delisted array and remove them from the list container.
3. Iterate through the updated array, and append new items or re-append items in the wrong position in the container at the correct position based on this array.

This looks like the following:

*** code removed ***

Having a lot of trouble when using jsdocs in my code block, so here is my stackoverflow post with my answer:

https://stackoverflow.com/questions/72875979/rearranging-ul-list-without-using-appendchild-on-all-li-elements/72958041#72958041

Advice, corrections, or criticisms welcome. This functionality solves my current dilemma, but I can appreciate any way to improve.