如何用JavaScript生成嵌套Div的HTML？解决标签闭合与子节点问题

我有一组nodeProps类实例的对象数组，需要将每个对象转为HTML的Div标签，部分Div需作为其他Div的子标签。但当前实现的createTag函数仅能添加第一个子节点，且无法正确闭合嵌套标签，现提供解决方案如下：

类定义 #

class nodeProps {
  constructor(id, name, data, parent, children) {
    this.id = id;
    this.name = name;
    this.data = data;
    this.parent = parent;
    this.children = children;
  }
}

当前错误代码 #

function createTag(nodes, node) {
  if (node.children != null) {
    // let kidList = node.children;
    let kids = nodes.filter((x) => node.children.includes(x.id));
    let tag = `<div className={styles.${node.name}}> ${createTag(
      nodes,
      kids[0]
    )}`;

    return tag;
  } else {
    return `<div className={styles.${node.name}}> </div>
`;
  }
}

问题分析 #

• 仅处理首个子节点：代码仅递归调用了第一个子节点kids[0]，完全忽略了其他子节点
• 父标签未闭合：存在子节点的Div只输出了起始标签，没有添加闭合的</div>

修复后的代码 #

function createTag(nodes, node) {
  // 生成当前节点的起始标签
  const startTag = `<div className={styles.${node.name}}>`;
  let childrenContent = '';

  // 遍历所有子节点，递归生成子标签内容
  if (node.children?.length > 0) {
    const kids = nodes.filter(x => node.children.includes(x.id));
    kids.forEach(child => {
      childrenContent += createTag(nodes, child);
    });
  }

  // 拼接完整标签：起始标签 + 子内容 + 闭合标签
  return `${startTag} ${childrenContent} </div>`;
}

修复说明 #

1. 遍历所有子节点：通过forEach循环处理所有匹配到的子节点，递归生成每个子节点的标签并拼接
2. 强制闭合标签：无论当前节点是否有子节点，最终都会添加</div>确保标签闭合
3. 安全判断子节点：使用可选链node.children?.length > 0避免children为null或undefined时的报错

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