用JavaScript中的父容器包装多个元素的最简单方法

我想将

页眉

、

主

和

页脚

元素包装在用JavaScript创建的容器

div

中。换句话说，我想插入一个container div作为

body

元素的直接子元素，但要将它包装成

body

的所有子元素

@导入url（'https://necolas.github.io/normalize.css/latest/normalize.css' );
：：选择{
背景色：#fe0；
颜色：#444；
}
* {
框大小：边框框；
保证金：0；
}
html，正文{
身高：100%；
}
页眉、主页眉、页脚{
身高：30%；
利润底部：1%；
背景色：#444；
}
p{
颜色：#ccc；
文本对齐：居中；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.集装箱{
身高：90%；
填充：2%；
背景色：#eee；
}

标题

主要

页脚

• 创建一个新的div

• 使用

  document.queryselectoral

• 使用nodeList上的

  Array#forEach.call

  对其进行迭代，并将每个元素附加到新创建的div中

• 将新div附加到正文：

代码如下所示：

var newElem = document.createElement('div')
newElem.textContent = 'newElem';

Array.prototype.forEach.call(document.querySelectorAll('header, main, footer'), function(c){
  newElem.appendChild(c);
});
document.body.appendChild(newElem);

---

为什么不使用jQuery？对于像这样的问题，它是完美的。@Flame2057只是为了学习的原因。我想深入研究JS，或许可以构建一个框架。我需要知道如何在vanilla JS中做类似的事情。这很有效。非常感谢。这里添加了

.container

类：很高兴您发现它很有用，感谢您更新的链接