2. Algorithm
  3. html - Simplest way to wrap multiple elements with a parent container in JavaScript - Stack Overflow

html - Simplest way to wrap multiple elements with a parent container in JavaScript - Stack Overflow

admin2025-04-21  1

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?

  • javascript
  • html
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
Add a ment  | 

1 Answer 1

Reset to default 5

  • Create a new div

  • Obtain a nodeList with document.querySelectorAll

  • Use Array#forEach.call on the nodeList to iterate through it and append each element to the newly created div

  • Append 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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745201726a290093.html

htmlSimplest way to wrap multiple elements with a parent container in JavaScriptStack Overflow

最新回复(0)