我想把header, main and footer容器中的元素div使用 JavaScript 创建。换句话说，我想插入一个容器 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。
Ideas?
代码看起来像这样：
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);
这里是 JSBIN http://jsbin.com/wafugiquke/1/edit?html,css,js,output
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
