如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围？

Posted 2023-03-11

【中文标题】如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围？

【英文标题】：How does one wrap multiple div-elements around another element-node using vanilla JavaScript and the Node-API only?

【发布时间】：2021-11-14 18:22:18

【问题描述】：

我使用的是帖子enter link description here的参考

我很好奇如何在 vanilla javascript 中使用 div 概念对 ul 进行多重包装。

到目前为止我尝试过的代码是

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

<nav class="main-nav">
    <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>
</nav>

任何帮助将不胜感激！

【参考方案1】：

编写一些帮助程序确实有助于以一种更具可读性和更少重复性的方式完成任务...

function removeAndReturn(targetNode) 
  return targetNode.parentNode.removeChild(targetNode);

function insertBefore(targetNode, newNode) 
  targetNode.parentNode.insertBefore(newNode, targetNode);

function wrapAround(targetNode, wrapperNode) 
  insertBefore(targetNode, wrapperNode);
  wrapperNode.appendChild(removeAndReturn(targetNode));

const firstOrder = document.createElement('div');
const secondOrder = document.createElement('div');

firstOrder.classList.add("someClass");
secondOrder.classList.add("random");

// wrap `secondOrder` container around the main navigation.
wrapAround(document.querySelector('ul.ul-0'), secondOrder);

// wrap `firstOrder` container around the `secondOrder` one.
wrapAround(secondOrder, firstOrder);

.someClass 
  /* kind of orange */
  border: 1px solid #fc0;
  padding: 2px;

.random 
  /* somehow greenish */
  border: 1px solid #0fc;

<nav class="main-nav">
  <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>
</nav>

编辑

“如何在所有 ul>li 中动态实现这一点。您能指导一下吗？- 脚本宿主”

function removeAndReturn(targetNode) 
  return targetNode.parentNode.removeChild(targetNode);

function insertBefore(targetNode, newNode) 
  targetNode.parentNode.insertBefore(newNode, targetNode);

function wrapAround(targetNode, wrapperNode) 
  insertBefore(targetNode, wrapperNode);
  wrapperNode.appendChild(removeAndReturn(targetNode));

const firstOrder = document.createElement('div');
const secondOrder = document.createElement('div');

firstOrder.classList.add("someClass");
secondOrder.classList.add("random");

document
  .querySelectorAll('ul')
  .forEach(elmNode => 
  
    const outerUlWrapper = firstOrder.cloneNode();
    const innerUlWrapper = secondOrder.cloneNode();

    // wrap inner `secondOrder` clone around the current list node.
    wrapAround(elmNode, innerUlWrapper);

    // wrap outer `firstOrder` clone around the `secondOrder` clone.
    wrapAround(innerUlWrapper, outerUlWrapper);
  );

.someClass 
  /* kind of orange */
  border: 1px solid #fc0;
  padding: 2px;

.random 
  /* somehow greenish */
  border: 1px solid #0fc;

<nav class="main-nav">
  <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>
</nav>

【讨论】：

如何在所有 ul>li 中动态实现相同的场景。你能指导一下吗？

【参考方案2】：

创建一个新元素：

const div = document.createElement('div');

给它一个 CSS 类：

div.classList.add('someClass');

在 DOM 中查找特定元素：

const theParentNode = document.querySelector( [[put a CSS selector here]] );

添加一个元素作为另一个元素的子元素：

theParentNode.appendChild(div);

请注意，添加一个元素作为另一个元素的子元素会将其从当前位置移开。

这些东西的组合会让你得到你所追求的。