使用javascript將第一個元素之后的所有元素添加到div中（無jQuery）

Question

我有以下HTML

<div id="main">
<aside id="list"><p>sometext</p></aside>
<aside id="list-2"><p>sometext</p></aside>
<aside id="list-3"><p>sometext</p></aside>
<aside id="list-4"><p>sometext</p></aside>
</div>

我想使用javascript使其看起來像：

<div id="main">
<aside id="list"><p>sometext</p></aside>
<div id="wrap">
<aside id="list-2"><p>sometext</p></aside>
<aside id="list-3"><p>sometext</p></aside>
<aside id="list-4"><p>sometext</p></aside>
</div>
</div>

我嘗試了insertAdjacentHTML和innerHTML方法：

widgets = document.getElementById('main');
widgets.innerHTML = "<div class='box-class'>" + widgets.innerHTML + "</div>";

但這也將包裝器添加到“列表”上。

Answer 1

您說過嘗試的代碼有兩個大問題（如果未在任何地方聲明widgets則有三個問題）：

 widgets = document.getElementById('main'); widgets.innerHTML = "<div class='box-class'>" + widgets.innerHTML + "</div>"; 

1. 使用字符串意味着瀏覽器必須瀏覽這些元素，為其構建HTML字符串，然后將該字符串返回給JavaScript； 然后，當您分配給innerHTML它必須銷毀已經存在的元素，並通過解析HTML字符串來構建新的替換元素。 這將清除所有附加到元素的事件處理程序或類似事件。 （當然，如果沒有，那沒關系。）
2. 這包裹了所有孩子，而不僅僅是第一個孩子之后的孩子。

（還將它們包裝在<div class='box-class'> ，而不是<div id="wrap"> ，但是...）

在所有現代瀏覽器上，元素都有一個可以用於此目的的children列表。 然后，只需創建一個包裝器，將第一個包裝器以外的其他包裝器移入包裝器，然后將其附加。

var main = document.getElementById("main");
var wrapper = document.createElement("div");
wrapper.id = "wrap";
while (main.children.length > 1) {
    // Note: Appending the element to a new parent removes it from its original
    // parent, so `main.children.length` will decrease by 1
    wrapper.appendChild(main.children[1]);
}
main.appendChild(wrapper);

例：

 var main = document.getElementById("main"); var wrapper = document.createElement("div"); wrapper.id = "wrap"; while (main.children.length > 1) { wrapper.appendChild(main.children[1]); } main.appendChild(wrapper); 

 #wrap { border: 1px solid blue; } 

 <div id="main"> <aside id="list"> <p>sometext</p> </aside> <aside id="list-2"> <p>sometext</p> </aside> <aside id="list-3"> <p>sometext</p> </aside> <aside id="list-4"> <p>sometext</p> </aside> </div> 

---

旁注：在標記中，您有</div>位置</aside> 。