JavaScript-配列のネストに基づいてネストされた順序なしリストを作成するにはどうすればよいですか？

このような配列のネストされた配列があるとします-

const arr = [
   'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6' ];

このようなリテラルの配列のネストされた配列を、ネストされた順序付けられていないHTMLのリストにマップするJavaScriptプログラムを作成する必要があります。

ここで注意する必要があるのは、ulのネストが配列のネストとまったく同じである必要があるということだけです。

例

このためのコードは-

になります

JavaScriptコード −

const arr = [
   'Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'],
   'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'
];
const prepareUL = (root, arr) => {
   let ul = document.createElement('ul');
   let li;
   root.appendChild(ul);
   arr.forEach(function(item) {
      if (Array.isArray(item)) {
         prepareUL(li, item);
         return;
      };
      li = document.createElement('li');
      li.appendChild(document.createTextNode(item));
      ul.appendChild(li);
   });
}
const div = document.getElementById('myList');
prepareUL(div, arr);

HTMLコード −

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="myList"></div>
</body>
</html>