Как манипулировать несколькими тегами ul в div

Question

Я хотел бы манипулировать тегами, чтобы получить данные, которые я получил от сервера. Эти данные выводятся в виде тега

.

Я попытался получить тег и вывести

, но, поскольку данные ответа выводят , структура ul сломалась.

Например:

<div>
  <ul>
    <li>1</li>
　  <li>2</li>
  </ul>
  <ul>
    <li>3</li>
　  <li>4</li>
  </ul>
  <ul>
    <li>5</li>
　<li>6</li>
  </ul>
</div>

И если ответ будет:

<div>
  <ul>
    <li>3</li>
　  <li>2</li>
  </ul>
  <ul>
    <li>1</li>
　  <li>5</li>
  </ul>
  <ul>
    <li>4</li>
　  <li>6</li>
  </ul>
</div>

Я хотел бы изменить порядок в HTML как данные json.

Это пример, который я пытался вывести из тега

данных в URL

for (var i = 0; i < t.length; i++) {
      var jsonData = r[t].url;
      var html = document.querySelectorAll(
        "div>ul>li>a"
      );
      for (var c = 0; c < html.length; c++) {

        if (
          document.querySelectorAll(
            "div>ul>li>a"
          )[c].href == jsonData
        ) {
          var out = document.querySelectorAll("div>ul>li>a")[
            c
          ];
          //console.log(outer);
          var li = document.querySelector("ul.test"); 
          var display = out;

          li.insertBefore(display, li.children[i]); 
        }
      }
    }

Результат должен отображаться в теге, но для полученных данных выводится

.