Создать список HTML на основе значения атрибута данных тегов div?

Question

У меня есть функция PHP , которая генерирует иерархическое представление некоторых сообщений блога в соответствии с их категорией, дочерней категорией, большой дочерней категорией и так далее.Он генерирует строку, содержащую теги div с его атрибутами данных.Я хочу преобразовать эти div в html <ul><li>, основываясь на их значении атрибута aria-level.

Фактический вывод из метода php

<div role="heading" aria-level="1">Test 1</div>
<div role="heading" aria-level="2">Test 1.1</div>
<div role="heading" aria-level="3">Test 1.1.1</div>
<div role="heading" aria-level="3">Test 1.1.2</div>
<div role="heading" aria-level="1">Test 2</div>
<div role="heading" aria-level="3">Test 2.1.1</div>
<div role="heading" aria-level="2">Test 2.2</div>

Требуемый вывод с использованием php / js / jquery / any framework

• Испытание 1
  • Испытание 1.1
    • Испытание 1.1.1
    • Испытание 1.1.2
• Тест 2
  • • Тест 2.1.1
  • Тест 2.2

Чего я добился до сих пор?

function buildRec(nodes, elm, lv) {
    var node;
    // filter
    do {
        node = nodes.shift();
    } while(node && !(/^h[123456]$/i.test(node.tagName)));
    // process the next node
    if(node) {
        var ul, li, cnt;
        var curLv = parseInt(node.tagName.substring(1));
        if(curLv == lv) { // same level append an il
            cnt = 0;
        } else if(curLv < lv) { // walk up then append il
            cnt = 0;
            do {
                elm = elm.parentNode.parentNode;
                cnt--;
            } while(cnt > (curLv - lv));
        } else if(curLv > lv) { // create children then append il
            cnt = 0;
            do {
                li = elm.lastChild;
                if(li == null)
                    li = elm.appendChild(document.createElement("li"));
                elm = li.appendChild(document.createElement("ul"));
                cnt++;
            } while(cnt < (curLv - lv));
        }
        li = elm.appendChild(document.createElement("li"));
        // replace the next line with archor tags or whatever you want
        li.innerHTML = node.innerHTML;
        // recursive call
        buildRec(nodes, elm, lv + cnt);
    }
}
// example usage
var all = document.getElementById("content").getElementsByTagName("*");
var nodes = []; 
for(var i = all.length; i--; nodes.unshift(all[i]));
var result = document.createElement("ul");
buildRec(nodes, result, 1);
document.getElementById("outp").appendChild(result);

<div id="outp">
</div>
<div id="content">
    <h1>Test 1</h1>
    <h2>Test 1.1</h2>
    <h3>Test 1.1.1</h3>
    <h3>Test 1.1.2</h3>
    <h1>Test 2</h1>
    <h3>Test 2.1.1</h3>
    <h2>Test 2.2</h2>
    <p></p>
</div>

Проблема должна быть решена?

Как вы можете видеть выше, она использует Теги заголовка Сортировать.Но, к сожалению, моя иерархия категорий не ограничивается только 6-м уровнем.Это может расти.Поэтому я хочу, чтобы JS / Jquery / any Framework конвертировал некоторые теги в структуру ul / li на основе значения их атрибута.Если нужны какие-либо изменения со стороны Backend, я могу поменять эти атрибуты / теги на любые со стороны PHP.Если это легко сделать со стороны PHP, тогда приветствуются также некоторые примеры фрагментов кода.Рассмотрите вышеупомянутые теги div как ввод одной строки.:)