Javascript 克隆元素并重复，直到视口被填充

学习JavaScript，这是我第一个真正的“项目”

我创建了一个循环来检查.background元素是否小于客户端，如果是，则将其添加到切片节点，直到.background元素与客户端的高度相同

问题是添加的切片节点太多，有时会使浏览器崩溃

另外，是否有方法克隆HTML节点并重复它，而不是使用：

background.innerHTML += '<span class=slice></span>';

background.innerHTML+=''；

如果有更好的方法来做我想做的事情，请告诉我

JSFiddle

HTML

<div class="master">

    <a id="btn-nav">
        <span></span>
        <span>Menu</span>
        <span></span>
    </a>

    <nav id="main-nav">

            <div class="background">

                <div class="slice"></div>


            </div>

    </nav>

</div><!-- end master -->

菜单

JS

(function () {
    'use strict';

    var w = document.documentElement.clientHeight;
    var menuBtn = document.getElementById('btn-nav');
    var slice = document.querySelectorAll('.slice');
    var background = document.getElementsByClassName('background')[0];

    //var mainNavHeight = document.getElementById('main-nav').clientHeight;
    //var slideAdd = slice.cloneNode(true);
    //var windowHeight = window.innerHeight;


    menuBtn.addEventListener('click', function() {

        menuBtn.classList.add('open');

            for(var i = background.clientHeight; i < w; i++) {      
                background.innerHTML += '<span class=slice></span>';

                            //for(var i = 0; i < slice.length; i++){
                //  slice[i].style.opacity = 1;
                // }
            }

    }, false);

}());

（函数（）{
"严格使用",；
var w=document.documentElement.clientHeight；
var menuBtn=document.getElementById（'btn-nav'）；
var slice=document.querySelectorAll（'.slice'）；
var background=document.getElementsByClassName（'background'）[0]；
//var mainNavHeight=document.getElementById（'main-nav'）.clientHeight；
//var slidead=slice.cloneNode（true）；
//var windowHeight=window.innerHeight；
menuBtn.addEventListener（'click'，function（）{
menuBtn.classList.add（'open'）；
对于（var i=background.clientHeight；i

完成了。如果有人知道更好的方法，请一定要让我知道！谢谢

var slice = document.querySelectorAll('.slice');
var menuBtn = document.getElementById('btn-nav');
var b = document.getElementsByClassName('background')[0];
var a = document.getElementById('main-nav').clientHeight

menuBtn.addEventListener('click', function() {

    menuBtn.classList.add('open');

        for(var i = b.clientHeight; i < a; i++) {   

          if(b.clientHeight == a) {

            break;
          } else {
            b.innerHTML += '<span class=slice></span>';
          }
        }

}, false);

var slice=document.querySelectorAll（'.slice'）；
var menuBtn=document.getElementById（'btn-nav'）；
var b=document.getElementsByClassName（'background'）[0]；
var a=document.getElementById（'main-nav'）.clientHeight
menuBtn.addEventListener（'click'，function（）{
menuBtn.classList.add（'open'）；
对于（var i=b.clientHeight；i

是。有更好的方法让你的部门成长，我们会让你知道。顺便说一句：你可以得到整个页面/窗口的高度值，你的背景div高度，你的主div值。。。做一些简单的运算，并相应地设置height属性怎么样？嗯，好的。让我再试一次。如果你正在寻找代码反馈，代码审查SE网站更适用。