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

Question

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

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。

Answer 1

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

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。