如何使用JavaScript渲染层级未知的动态嵌套列表

核心用递归函数处理嵌套结构，不管层级多深都能完整渲染，通过记录当前层级实现自动缩进效果。

完整实现代码 #

HTML结构 #

<!-- 列表渲染容器 -->
<div id="listContainer"></div>

CSS样式（可选，用来实现缩进和前缀效果，比手动拼接字符更灵活） #

.list-item {
  /* 每层级缩进20px */
  padding-left: 20px;
  line-height: 1.8;
}
.list-item::before {
  content: "-- ";
  margin-right: 4px;
}
/* 顶层节点不需要前缀和默认缩进 */
.list-item.level-0 {
  padding-left: 0;
}
.list-item.level-0::before {
  content: none;
}

JavaScript逻辑 #

// 你的嵌套数据
const data = [{
  name: 'level1a',
  otherData: [
    { 
      name: 'level2a'
    },
    {
      name: 'level2b'
    },
    {
      name: 'level2c',
      otherData: [
        {
          name: 'level3a',
          otherData: [
            {
              name: 'level4a'
            },
            {
              name: 'level4b'
            }
          ]
        },
        {
          name: 'level3b'
        }
      ]
    }
  ]
}]

const container = document.getElementById('listContainer')

/**
 * 递归渲染列表函数
 * @param {Array} list 当前层级的节点数组
 * @param {Number} level 当前层级，从0开始计数
 */
function renderList(list, level = 0) {
  list.forEach(item => {
    // 创建当前节点DOM
    const itemEl = document.createElement('div')
    itemEl.className = `list-item level-${level}`
    itemEl.textContent = item.name
    container.appendChild(itemEl)
    
    // 如果存在子节点，递归渲染下一层
    if (item.otherData?.length) {
      renderList(item.otherData, level + 1)
    }
  })
}

// 启动渲染
renderList(data)

效果说明 #

运行后渲染效果和你给出的预期完全一致，层级不限制，哪怕20层嵌套也可以正常渲染，不需要修改代码逻辑，只需要传入对应结构的数据即可。
如果不想用CSS，也可以在递归的时候手动拼接缩进空格和--字符，直接生成文本内容输出。

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