I want to wrap the header, main and footer elements in a container div created with JavaScript. In other words I want to insert a container div as a direct child of the body element but have it wrap all of body's children.
@import url( '.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>I want to wrap the header, main and footer elements in a container div created with JavaScript. In other words I want to insert a container div as a direct child of the body element but have it wrap all of body's children.
@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>I've seen this done with single elements utilizing replaceChild(), but not with multiple elements as is here. I would like to not use jquery here.
Ideas?
Share Improve this question edited Mar 26, 2017 at 21:47 Lynel Hudson asked Mar 26, 2017 at 21:30 Lynel HudsonLynel Hudson 2,4251 gold badge21 silver badges44 bronze badges 1- 1 @Flame2057 only for learning reasons. I want to get pretty heavy into JS and maybe build a framework. I'll need to know how to do stuff like this in vanilla JS. – Lynel Hudson Commented Mar 26, 2017 at 21:56
1 Answer
Reset to default 5Create a new div
Obtain a nodeList with
document.querySelectorAllUse
Array#forEach.callon the nodeList to iterate through it and append each element to the newly created divAppend the new div to the body:
The code would look something like this:
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 here
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745201704a4616363.html
评论列表（0条）