如何使用香草JavaScript和Node-API将多个div元素封装在另一个元素节点上？

Question

我正在使用post enter link description here的参考

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

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

​

   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>

​

如有任何帮助，将不胜感激！

Answer 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>

​

Answer 2

要创建新元素，请执行以下操作：

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

要给它一个CSS类：

div.classList.add('someClass');

若要在DOM中查找特定元素，请执行以下操作：

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

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

theParentNode.appendChild(div);

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

这些东西的结合会让你得到你想要的东西。