如何用原生JS（Vanilla JS）无限递归嵌套追加元素？

当然可以，通过递归函数就能轻松实现这个需求。核心逻辑是遍历标签数组，每次创建当前标签对应的DOM元素，再将剩余标签的递归生成结果作为子节点追加进去，直到数组遍历完成。

基础实现代码 #

function createNestedElements(tags) {
  // 递归终止条件：标签数组为空时返回null
  if (!tags.length) return null;

  // 创建当前标签的DOM元素
  const currentElement = document.createElement(tags[0]);
  // 递归处理剩余标签，得到子元素并追加
  const childElement = createNestedElements(tags.slice(1));
  if (childElement) {
    currentElement.appendChild(childElement);
  }

  return currentElement;
}

使用示例 #

// 定义需要嵌套的标签数组
const list = ["div", "ul", "li", "a"];
// 生成嵌套DOM结构
const nestedStructure = createNestedElements(list);
// 将生成的结构追加到页面（比如body）
document.body.appendChild(nestedStructure);

这段代码执行后，会生成你期望的嵌套结构：

<div>
  <ul>
    <li>
      <a></a>
    </li>
  </ul>
</div>

扩展：给最后一个元素添加内容 #

如果需要给最内层元素添加文本或子内容，可以修改函数，增加一个内容参数：

function createNestedElements(tags, content) {
  if (!tags.length) return null;

  const currentElement = document.createElement(tags[0]);
  const remainingTags = tags.slice(1);

  if (remainingTags.length) {
    // 还有子标签，继续递归
    currentElement.appendChild(createNestedElements(remainingTags, content));
  } else if (content) {
    // 处理最内层元素的内容：支持文本或DOM节点
    if (typeof content === 'string') {
      currentElement.textContent = content;
    } else {
      currentElement.appendChild(content);
    }
  }

  return currentElement;
}

// 使用示例：给a标签添加文本
const nestedWithContent = createNestedElements(["div", "ul", "li", "a"], "首页");
document.body.appendChild(nestedWithContent);

这个方案完全基于原生JS，没有任何外部依赖，支持任意长度的标签数组，理论上可以实现无限层级的嵌套（只要浏览器内存允许）。

内容的提问来源于stack exchange，提问作者Abdessalam Salim Chakiri