如何以最小的性能开销将DOM元素的内容包装到另一个元素中？

Question

我想将DOM元素的实时内容包装到另一个中，保持所有结构和所有附加的事件侦听器不变。

例如，我想要这个

<div id="original">
  Some text <i class="icon></i>
</div>

成为

<div id="original">
  <div id="wrapper">
    Some text <i class="icon></i>
  </div>
</div>

最好没有jQuery。

Answer 1

如果除了ID以外没有别的东西来区分你的节点，并且鉴于#original有多个子节点，创建一个新的父节点并插入它可能更简单：

<击>

var original = document.getElementById('original');
var parent = original.parentNode;

var wrapper = document.createElement('DIV');
parent.replaceChild(wrapper, original);
wrapper.appendChild(original);

然后将ID移动到正确的位置：

wrapper.id = original.id;
original.id = 'wrapper';

当然注意到，变量original和wrapper现在指向错误的＆＃39;元件。

编辑哦，你想让听众附加......技术上，他们仍然是，但他们现在已经附加到内部元素，而不是外面的。

编辑2 修改了答案，将事件监听器附加到原始元素（现在是外部div）：

var original = document.getElementById('original');
var wrapper = document.createElement('DIV');
wrapper.id = 'wrapper';
while (original.firstChild) {
    wrapper.appendChild(original.firstChild);
}
original.appendChild(wrapper);

这可以简单地通过将每个子节点从原始div中连续移动到新父节点中，然后将该新父节点移回到子节点所在的位置。

此答案的先前版本的缺点是您必须单独迭代所有孩子。

请参阅https://jsfiddle.net/alnitak/d0jss2yu/了解演示

Answer 2

更新回答：

这应该比我以前的答案更好，代码更少。

var content = document.getElementById("myList").innerHTML;
document.getElementById("myList").innerHTML = "<div id='wrapper'></div>"
document.getElementById("wrapper").innerHTML = content;

<击>

编辑：这会破坏附加到子节点的任何事件侦听器。

上一个回答：

我没有尝试过，但这样的事情应该有效：

var wrapper = document.createElement("DIV");
wrapper.id = "wrapper";
var content = document.getElementById("myList").childNodes;
document.getElementById("myList").appendChild(wrapper);
document.getElementById("wrapper").appendChild(content);

1. 创建包装元素。
2. 获取myList内容。
3. 将包装元素添加到myList。
4. 将myList内容添加为包装元素的子项。

Answer 3

或者，这样做。它还会在相邻的结果div中显示结果。

TextBox