如何用原生JavaScript将子ul包裹为div并作为对应li子元素实现巨型菜单

你原来的实现是将所有子UL的HTML统一拼接，没有和对应的父级LI做绑定，只要逐个处理每个子UL，替换原位置即可，实现代码如下：

const octo = document.querySelector("#octo");
const firstLevelUlItems = octo.querySelectorAll("#octo > li > ul");

firstLevelUlItems.forEach((ulEl) => {
  // 给父级LI添加标识类
  const parentLi = ulEl.parentElement;
  parentLi.classList.add("is-mega-menu");
  // 创建包裹容器
  const megaWrapper = document.createElement("div");
  megaWrapper.classList.add("mega-menu-wrapper");
  // 将当前UL移入包裹容器
  megaWrapper.appendChild(ulEl);
  // 将包裹容器插入到原UL所在的位置
  parentLi.appendChild(megaWrapper);
});

如果你的场景中单个一级LI下存在多个子UL需要统一包裹横向排列，可以使用下面的兼容写法：

const octo = document.querySelector("#octo");
// 遍历所有一级LI
octo.querySelectorAll("#octo > li").forEach((parentLi) => {
  // 筛选当前LI下的直接子UL
  const childUls = parentLi.querySelectorAll(":scope > ul");
  if (childUls.length === 0) return;
  // 添加标识类
  parentLi.classList.add("is-mega-menu");
  // 创建包裹容器
  const megaWrapper = document.createElement("div");
  megaWrapper.classList.add("mega-menu-wrapper");
  // 批量将子UL移入容器
  childUls.forEach(ul => megaWrapper.appendChild(ul));
  // 容器挂载到父级LI下
  parentLi.appendChild(megaWrapper);
});

以上代码运行后会完全匹配你给出的预期HTML结构，你可以直接给.mega-menu-wrapper添加display: flex属性实现子UL横向排列。

内容的提问来源于stack exchange，提问作者Kayahan Kahrıman