如何仅使用原生JavaScript及Node API为指定元素节点包裹多层div元素

现有代码问题 #

• 调用insertAdjacentHTML时传入了DOM元素作为参数，该方法仅支持接收HTML字符串，这一步无法实现预期的嵌套效果
• appendChild方法只能接收1个DOM节点参数，同时传入两个节点的写法会导致第二个参数被直接忽略
• 嵌套逻辑倒置：要实现给ul包裹两层div的效果，正确的层级顺序是「外层div → 内层div → ul」，原有写法没有按这个顺序嵌套元素

修复后实现代码 #

const firstOrder = document.createElement('div');
const secondOrder = document.createElement('div');
firstOrder.classList.add("someClass");
secondOrder.classList.add("random");
const targetUl = document.querySelector('.ul-0');
const theParentNode = document.querySelector('.main-nav');

// 按层级嵌套：ul放入内层div，内层div放入外层div
firstOrder.appendChild(targetUl);
secondOrder.appendChild(firstOrder);
// 把完整的嵌套结构放入父容器main-nav
theParentNode.appendChild(secondOrder);

执行后最终的DOM结构如下，原有ul内部的内容会完整保留：

<nav class="main-nav">
  <div class="random">
    <div class="someClass">
      <ul class="main-nav-list ul-0">
        <li class="a"> <a href="/">First</a>
            <ul class="main-nav-list">
                <li class="b"> <a href="/">Type of menu</a>
                    <ul class="main-nav-list">
                        <li class="c"> <a href="/">Summer</a> </li>
                        <li class="c"> <a href="/">Winter</a> </li>
                        <li class="c"> <a href="/">All season</a> </li>
                        <li class="c"> <a href="/">Spring </a> </li>
                    </ul>
                </li>
            </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

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