<div class="wrap"></div>
// итак, пусть будет задан некий абстрактный массив 
// с произвольной глубиной вложенности
// при этом элементами массива могут быть
// строки и вложенные массивы
const arr = [
  "string 1",
  "string 2",
  [
    "string 3.1",
    "string 3.2",
    [
      "string 3.3.1",
      [
        "string 3.3.2.1",
        "string 3.3.2.2"
      ],
      "string 3.3.3",
    ]
  ],
  "string 4",
  [
    "string 5.1",
    [
      "string 5.2.1",
      [
        "string 5.2.2.1",
        "string 5.2.2.2"
      ],
      "string 5.2.3"
    ]
  ]
];

// так как глубина вложенности произвольная
// для обхода всех элементов оптимальным
// будет использовать рекурсивную функцию
function parseArray(data) {
  let retstr = '';
  if(typeof data === "string"){
    // если строка, то выводим ее 
    // содержимое как элемент текущего списка
    retstr += '<li>'+data+'</li>';
  }else if(Array.isArray(data) ){
    // если массив, то создаем влеженный список
    retstr += '<ul>';
    // и каждый элемент массива отдаем на обработку
    // нашей функции, вызывая ее из нееже (это и есть рекурсия)
    // таким образом мы обеспечиваем обход
    // всех элементов нашей древовидной структуры
    // независимо от ее глубины вложенности и порядка
    // следования элементов
    data.forEach(value=>{
      retstr += parseArray(value);
    });
    // после прохода всех элементов внутри текущего
    // массива закрываем текущий список
    retstr += `</ul>`;
  }
  return retstr;
}


let wrap = document.querySelector('.wrap');
wrap.innerHTML = parseArray(arr);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.