为什么带有 的“innerHTML”属性不会创建新行？答案

【问题标题】：Why does the "innerHTML" property with doesn't create new lines?为什么带有 的“innerHTML”属性不会创建新行？
【发布时间】：2015-11-20 21:20:31
【问题描述】：

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

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。

【问题讨论】：

@Felix 我不认为这是重复的； bil 附加到。
@Kenney：我明白了。好吧，这些问题非常相关。
我无法重现该问题：fiddle。它做它所说的。你的意思是你想要bil = bil + "* "; document.q...innerHTML = bil;？
@Kennedy：所以我猜他确实想要document.querySelector(".py").innerHTML += bil +" ";，而且是重复的 :P 。 bil 的东西仅用于构建每一行。见jsfiddle.net/fa0tgtg5/1
重复innerHTML with For Loop in Javascript

标签： javascript dom

【解决方案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;
}

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

这是fiddle。

【讨论】：

不，实际上他有*** （见小提琴）
html = bil + " "; 行应该是 += 并且你并不需要自动关闭的 / 字符。