Question

我想将header，main和footer元素包装在使用JavaScript创建的容器div中。换句话说，我想插入一个容器div作为body元素的直接子元素，但让它包装所有body个孩子。

＆＃13;

@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;
}

＆＃13;

<html>
  <body>

    <header>
      <p>header</p>
    </header>
    
    <main>
      <p>main</p>
    </main>
    
    <footer>
      <p>footer</p>
    </footer>

  </body>
</html>

＆＃13;

我已经看到使用replaceChild()的单个元素完成了这项工作，但没有使用多个元素。 我不想在这里使用jquery。

想法？

Answer 1

创建新的div
获取...
在nodeList上使用document.querySelectorAll迭代它并将每个元素追加到新创建的div
将新div添加到正文中：

代码看起来像这样：

Array#forEach.call

JSBIN here

在JavaScript

1 个答案: