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

Question

我正在使用 post 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>

任何帮助将不胜感激！！

Answer 1

创建新元素：

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

给它一个CSS class:

div.classList.add('someClass');

在 DOM 中查找特定元素：

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

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

theParentNode.appendChild(div);

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

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

Answer 2

编写一些帮助程序确实有助于以更易读且重复性更低的方式完成任务...

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>

编辑

"How to achieve this in all ul>li with the same scenario dyanmically. can you please guide? – Script Host"

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>

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

How does one wrap multiple div-elements around another element-node using vanilla JavaScript and the Node-API only?

javascript

dom

appendchild

removechild

createelement