for循环只有最后一个结果

Question

window.onload = function() {
    //var boxWidth = document.getElementById("pic_box").offsetWidth;
    //var boxHeight = document.getElementById("pic_box").offsetHeight;
    var picBox = document.getElementById("pic_box");
    var ul = document.getElementById("pic_box_ul");
    var nodeLi = document.createElement("li");
    for (i=0;i<=100;i++){
        liTop = [i]*10;
        liLeft = [i]*10;
        ul.appendChild(nodeLi);
        nodeLi.setAttribute("style","top:"+liTop+"px;height:"+liLeft+"px");
    }
}

不是应该输出100个li吗？怎么只有一个呢

自己想了一下是不是每一次for都覆盖了上一次的结果，所以只有一个，那要怎么处理才不会覆盖呢

Answer 1

这个代码很有问题啊，先不说能不能跑得通，先是变量定义问题：i也没定义，liTop，liLeft也没定义；
另外没有100个li标签的原因也是没理解循环的含义，应该把createElement("li")放到for循环里

window.onload = function () {
        //var boxWidth = document.getElementById("pic_box").offsetWidth;
        //var boxHeight = document.getElementById("pic_box").offsetHeight;
        var picBox = document.getElementById("pic_box");
        var ul = document.getElementById("pic_box_ul");
        for (var i = 0; i <= 100; i++) {
          var nodeLi = document.createElement("li");
          var liTop = [i] * 10;
          var liLeft = [i] * 10;
          ul.appendChild(nodeLi);
          nodeLi.setAttribute("style", "top:" + liTop + "px;height:" + liLeft + "px");
        }
      }

Answer 2

 var nodeLi = document.createElement("li");

把这个放循环里试试

Answer 3

window.onload = function() {
    //var boxWidth = document.getElementById("pic_box").offsetWidth;
    //var boxHeight = document.getElementById("pic_box").offsetHeight;
    var picBox = document.getElementById("pic_box");
    var ul = document.getElementById("pic_box_ul");    
    for (i=0;i<=100;i++){
        var nodeLi = document.createElement("li");
        liTop = [i]*10;
        liLeft = [i]*10;
        ul.appendChild(nodeLi);
        nodeLi.setAttribute("style","top:"+liTop+"px;height:"+liLeft+"px");
    }
}

Answer 4

把var nodeLi = document.createElement("li");放到循环里面

Answer 5

var nodeLi = document.createElement("li")在循环外部，只生成一个li标签，无论在循环中appendChild多次都只会有一个li标签且为循环最后一次为准。如果需要生产100个li标签，应该在循环中createElement创建li标签再加入到ul中

Answer 6

因为你的nodeLi是在for循环外面创建的，将同一个DOM元素反复插入到父节点，所以之后出现一个。

另外，你的liTop、liLeft、i这三个变量都没进行声明，虽然js不会报错，但是会污染全局变量。