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>";

但是这会在＆＃34; list＆＃34;上添加包装。太。

Answer 1

您说过的代码存在两个大问题（如果widgets未在任何地方声明，则有三个问题）：

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

使用字符串意味着浏览器必须遍历元素，为它们构建HTML字符串，并将该字符串返回给JavaScript;然后当你分配给innerHTML时，它必须销毁已经存在的元素，并通过解析HTML字符串来构建新的替换元素。这将消除附加到元素的任何事件处理程序或类似操作。（当然，如果没有，那就不重要了。）
包裹所有的孩子，而不仅仅是第一个孩子之后的孩子。

（它还将它们包含在<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);

示例：

＆＃13;

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);

＆＃13;

#wrap {
  border: 1px solid blue;
}

＆＃13;

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

＆＃13;

附注：在您的标记中，您有</div> {。}}。

使用javascript（no jQuery）将第一个元素后面的所有元素添加到div

1 个答案: