javascript - 为什么带有<br>的“innerHTML”属性不会创建新行？

我正在尝试构建“ *”的金字塔，我只能看到它的最后一行，而有了警报，我可以看到每一行。有人知道我的代码有什么问题吗？

function build(){
        var x = document.hi.floor.value;
        //alert(x);
        var i;
        var bil= "";
        for(i=0; i<x; i+=1){
            bil = bil + "*";
            //alert(bil);
            document.querySelector(".py").innerHTML= bil +"<br/>";
        }
    }

这是fiddle。

最佳答案

您应该在循环中连接结果，然后再输出结果，如下所示：

function build(){
    var x = document.hi.floor.value;
    //alert(x);
    var i;
    var bil= "";
    var html = "";
    for(i=0; i<x; i+=1){
        bil = bil + "*";
        //alert(bil);
        html += bil +"<br/>";
    }
    document.querySelector(".py").innerHTML= html;
}

您只是用最新的innerHTML值覆盖了以前的bil值。因此最后您只有***<br/>（对于x = 3），并且换行符并没有真正显示出来，因为后面没有任何内容。

这是fiddle。