javascript - 根据字符串路径生成div元素

Question

我正在开发一个 chrome 扩展，需要根据类别生成嵌套的 DOM 元素。这些类别保存为数组中的字符串。子类别的层级通过路径显示。

这是一个简单的例子

类别数组:

let categories = [a, a/b, b, b/c/d];

我想生成这样的嵌套 div 元素:

<div id="a">
    <div id="b"></div>
</div>
<div id="b">
    <div id="c">
        <div id="d"></div>            
    </div>
</div>

以我目前的状态，我只创建了独特的顶级 div，并且不知道如何在顶级 div 中生成独特的子类别。

categories.forEach(function (i) {

  let splitedCategory = i.split('/');

  let parentID = String(splitedCategory[0]);
  let parentElement = document.getElementById(parentID);

  if(!containerElement.contains(parentElement)) {
    containerElement.innerHTML += '<div id="' + i + '"></div>';
  }
});

Answer 1

let categories = ['a', 'a/b', 'b', 'b/c/d'];

function f(str, html = ''){
  str = str.split('/');
  html += `<div id="${str[0]}">`
  if(str.length > 1){
    html += f(str.slice(1).join("/"));
  }
  html += `</div>`;
  return html;
}

categories.map(a=>console.log(f(a, '')))