javascript - 使用 javascript(无 jQuery)将第一个元素之后的所有元素添加到 div

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. 它包裹了所有的 child ，而不仅仅是第一个 child 之后的 child 。

(它还将它们包装在 <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> .