我使用的是在此輸入鏈接描述
的帖子參考。我很好奇，如何在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'/span>, document. querySelector('.someClass')) 。
theParentNode.appendChild(firstOrder, secondOrder); <nav class="main-nav"> /span>
<ul class="main-nav-list ul-0">
<li class="a"> < a href="/">First</a>
<ul class="main-nav-list">/span>
<li class="b"> < a href="/">選單型別</a>/span>
<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="/">所有季節< a> </li>/span>
<li class="c"> < a href="/">Spring < /a> </li>
</ul>/span>
</li>/span>
</ul>/span>
</li>/span>
</ul>/span>
</nav>/span>希望得到任何幫助，謝謝！
uj5u.com熱心網友回復：
撰寫一些幫助程式確實有助于以一種也許更可讀和更少重復的方式實作任務......
。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")。
///將`secondOrder`容器包在主導航周圍。
wrapAround（document.querySelector（'ul.ul-0'）, secondOrder）。
///將 "firstOrder "的容器包在 "secondOrder "的容器周圍。
wrapAround（secondOrder, firstOrder）;.someClass {
/*種橘子 */
border: 1px solid #fc0;
padding: 2px;
}
.random {
/* somehow greenish */ {
border: 1px solid #0fc;
}<nav class="main-nav"> /span>
<ul class="main-nav-list ul-0">
<li class="a"> <。 a href="/">First</a>
<ul class="main-nav-list">/span>
<li class="b"> < a href="/">選單型別</a>/span>
<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="/">所有季節< a> </li>/span>
<li class="c"> < a href="/">Spring < /a> </li>
</ul>/span>
</li>/span>
</ul>/span>
</li>/span>
</ul>/span>
</nav>/span>uj5u.com熱心網友回復：
要創建一個新元素：
const div = document.createElement('div'/span>) 。
要給它一個CSS類：
div.classList.add('someClass'/span>) 。
要在DOM中找到一個特定的元素：
const theParentNode =document. querySelector([[put a CSS selector here]] ) 。
要添加一個元素作為另一個元素的子元素：
theParentNode.appendChild（div）。
注意，將一個元素添加為另一個元素的子元素將把它從其當前位置移開。
這些東西的組合將使你得到你想要的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331326.html
標籤：