如何用JavaScript递归函数自动创建多层嵌套div（替代手动appendChild）

我们可以写一个递归函数，传入需要创建的嵌套层数，就能自动生成对应的多层div结构，不用手动重复调用document.createElement和appendChild。

递归函数实现 #

function createNestedDivs(levels, parent = document.createElement('div')) {
  // 递归终止条件：层数为0时返回当前父元素
  if (levels <= 0) return parent;
  
  // 创建新的div元素
  const newDiv = document.createElement('div');
  // 将新div添加到父元素中
  parent.appendChild(newDiv);
  // 递归调用，层数减1，将新div作为父元素传入
  return createNestedDivs(levels - 1, newDiv);
}

用法示例 #

比如要生成4层嵌套的div（和你提供的示例结构一致），只需要调用：

// 创建4层嵌套div，返回最外层的div元素
const nestedDivs = createNestedDivs(4);
// 将生成的结构添加到页面中
document.body.appendChild(nestedDivs);

这段代码会自动生成如下DOM结构：

<div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

对比手动创建的方式，递归函数只需要一行调用就能完成任意层数的嵌套，大幅简化了代码。

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