我想将header,main和元素包装在使用 JavaScript 创建的footer容器中。div换句话说，我想插入一个容器 div 作为body元素的直接子元素，但让它包裹所有的body子元素。
@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
::selection {
background-color: #fe0;
color: #444;
}
* {
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
header, main, footer {
height: 30%;
margin-bottom: 1%;
background-color: #444;
}
p {
color: #ccc;
text-align: center;
position:relative;
top: 50%;
transform: translateY( -50% );
}
.container {
height: 90%;
padding: 2%;
background-color: #eee;
}<html>
<body>
<header>
<p>header</p>
</header>
<main>
<p>main</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>我已经看到使用单个元素完成此操作replaceChild()，但没有像这里那样使用多个元素完成此操作。我不想在这里使用jquery。
有想法吗？
创建一个新的div
获取节点列表document.querySelectorAll
使用Array#forEach.callnodeList 来迭代它并将每个元素附加到新创建的 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);