Question

我有一个HTML页面，其中包含一些不同的孩子。我希望body只是一个包装元素的父元素，它将包含所有以前的body子元素。我该怎么做呢？

Answer 1

您可以将身体的所有子节点移动到新元素，然后将该元素附加到正文，例如

function wrapAll() {
  var el, div = document.createElement('div');
  while (el = document.body.firstChild) {
    div.appendChild(el);
  }
  document.body.appendChild(div);
}

在页面加载后调用该函数：

window.onload = wrapAll;

如果你不关心IE 8（你应该因为它仍然有大约20％的用户份额），你可以使用更简洁：

function wrapAll() {
  var div = document.createElement('div');
  [].slice.call(document.body.childNodes).forEach(function(node){div.appendChild(node)});
  document.body.appendChild(div);
}

但是我认为第一个是兼容性和可维护性的更好选择（而且可能更快）。

请注意，第二个在IE 8中不起作用的原因是它不允许将主机objets作为 this 传递给内置方法，你不能用polyfill修复它，垫片，猴子补丁或其他什么。

修改

继Squint的评论后，您还可以使用 querySelectorAll 跳过 slice 的使用如果没有要考虑的文本节点：

var div = document.createElement('div');
div.id = 'foo';
[].forEach.call(document.body.querySelectorAll('*'), function(node){div.appendChild(node)});
document.body.appendChild(div);

并且因为 forEach 将需要IE8中的垫片，将主机对象作为传递就可以了。请注意，在IE 8中仅部分支持querySelector API，在IE 7中根本不支持。

Answer 2

假设您在页面加载后有意使用JavaScript执行此操作，请参阅以下内容（使用jQuery）：

var $wrapper = $('<div>');
var $children = $('body').contents();
$children.appendTo($wrapper);
$wrapper.appendTo('body');

在jsfiddle中：http://jsfiddle.net/y6f6ht8n/1/

如何将document.body的所有子项放入包装器中？

2 个答案:

修改