如何用JavaScript数组生成指定层级结构的HTML有序列表

我正在尝试通过JavaScript将数组渲染为特定结构的HTML元素，目标效果如图（）所示。

当前代码生成的是嵌套的有序列表结构，但我需要调整为：第一个元素与最后一个元素处于同一层级，且每个后续的li元素都处于相同层级。

当前代码 #

JavaScript #

function createOrderedList(items) {
  var ol = document.createElement("ol");
  items.forEach(function(item) {
    ol.appendChild(createListItem(item));
  });
  return ol;
}

function createListItem(item) {
  var li = document.createElement("li");
  li.textContent = item;
  return li;
}
var array = ["a", "b", "c", "d", "e"];
var list = array.reduceRight(function(p, c) {
  var el = createOrderedList([c]);
  if (p == null) {
    p = el;
  } else {
    el.appendChild(p);
  }
  return el;
}, null);
document.querySelector(".content").appendChild(list);

HTML #

<div class='content'></div>

解决方案 #

要实现所有li元素同层级的结构，不需要通过reduceRight嵌套生成多层ol，直接创建单个有序列表并将数组所有元素作为li添加进去即可。修改后的JavaScript代码如下：

function createOrderedList(items) {
  var ol = document.createElement("ol");
  items.forEach(function(item) {
    ol.appendChild(createListItem(item));
  });
  return ol;
}

function createListItem(item) {
  var li = document.createElement("li");
  li.textContent = item;
  return li;
}
var array = ["a", "b", "c", "d", "e"];
// 直接生成包含所有元素的单层有序列表
var list = createOrderedList(array);
document.querySelector(".content").appendChild(list);

修改后生成的HTML结构为：

<div class='content'>
  <ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
  </ol>
</div>

所有li元素都处于同一层级，满足需求。

内容的提问来源于stack exchange，提问作者Kacper98