如何修改JS数组转嵌套UL的函数，为子UL前置标题div？

要实现将嵌套数组的标题元素作为div前置到对应子ul之前，且在生成DOM时直接完成，最优雅的方式是用递归创建DOM元素，在处理每个节点时先构建标题div，再递归生成子ul并插入到标题之后。

核心实现思路 #

• 递归遍历嵌套数组，每个数组节点对应一个<li>元素
• 从节点中提取标题（第二个元素），创建独立的<div>并插入到<li>的最前方
• 对当前节点的子数组递归生成子<ul>，直接插入到标题div之后
• 额外内容（如段落）可按需插入到<li>的对应位置

代码实现（通用版） #

适用于节点结构为[ID, 标题, ...内容/子节点]的情况，自动过滤出子数组作为子节点：

function prepareUL(nodes) {
  const ul = document.createElement('ul');
  
  nodes.forEach(node => {
    const li = document.createElement('li');
    // 提取标题并创建div
    const titleDiv = document.createElement('div');
    titleDiv.textContent = node[1];
    titleDiv.classList.add('node-title'); // 可选：添加类名用于样式控制
    li.appendChild(titleDiv);
    
    // 提取子节点数组并递归生成子UL
    const childNodes = node.filter(item => Array.isArray(item));
    if (childNodes.length > 0) {
      const childUl = prepareUL(childNodes.flat());
      li.appendChild(childUl);
    }
    
    // 处理段落等文本内容（排除ID、标题和子节点）
    const content = node.filter(item => typeof item === 'string' && item !== node[1]);
    content.forEach(text => {
      const p = document.createElement('p');
      p.textContent = text;
      li.appendChild(p);
    });
    
    ul.appendChild(li);
  });
  
  return ul;
}

优化版（固定节点结构） #

如果你的数组节点结构是固定的（比如[ID, 标题, 子节点数组, ...段落内容]），可以用解构赋值让代码更简洁：

function prepareUL(nodes) {
  const ul = document.createElement('ul');
  
  nodes.forEach(([id, title, children, ...content]) => {
    const li = document.createElement('li');
    
    // 创建标题div
    const titleDiv = document.createElement('div');
    titleDiv.textContent = title;
    titleDiv.classList.add('node-title');
    li.appendChild(titleDiv);
    
    // 递归生成子UL（仅当存在子节点时）
    if (Array.isArray(children) && children.length) {
      li.appendChild(prepareUL(children));
    }
    
    // 插入段落内容
    content.forEach(text => {
      const p = document.createElement('p');
      p.textContent = text;
      li.appendChild(p);
    });
    
    ul.appendChild(li);
  });
  
  return ul;
}

使用说明 #

• 调用函数后直接得到完整的嵌套ul DOM元素，可直接插入到页面中，无需后续DOM调整
• 可以根据需求给标题div添加自定义属性（如titleDiv.dataset.id = id）
• 样式可通过.node-title类名直接控制

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