Question

我尝试将一些数字越来越多的文字字符串添加到div中例如：

<div>
Text String n°: 1
Text String n°: 2
Text String n°: 3
etc...
</div>

但有些事情不能正常运作：

var StringsContainer = document.getElementById('StringsContainer');

var createTextStrings = function(){   
var i = 0
    while(i < 3){   

        i++;
        console.log("String n°:" + (i + 1));    
        document.body.innerText = "String n°:" + (i + 1);
    }    
};   

createTextStrings();

演示：http://jsfiddle.net/Y5z6K/

在console.log中我可以看到类似的结果，但它仍然不起作用。

解决方案：
这里更新了完美的结果：http://jsfiddle.net/Y5z6K/4/

Answer 1

只需更改附加字符串：

document.body.innerText += "String n°:" + (i) +"\n";

完整代码：

var StringsContainer = document.getElementById('StringsContainer');

var createTextStrings = function () {
    var i = 0
    while (i < 4) {
        i++;
        console.log("String n°:" + (i));
        document.body.innerText += "String n°:" + i + "\n";
    }
};

createTextStrings();

此外，您不需要i + 1，因为我已经增加了。

演示：http://jsfiddle.net/Y5z6K/1/

Answer 2

在循环时连接字符串：

document.body.innerText += "String n°:" + i + "\n";

另外，你不需要i ++然后在显示它时添加另一个i + 1。所以，只需在字符串显示上删除+1即可。

更新：为换行添加“\ n”。

见小提琴：

JSFiddle

Answer 3

试试这个： http://jsfiddle.net/Y5z6K/2/

<强> JS：

var StringsContainer = document.getElementById('StringsContainer');

var createTextStrings = function () {
    var i = 0
    while (i < 3) {
        console.log("String n°:" + (i + 1));
        document.body.innerHTML += "String n°:" + (i + 1) + "<br\>";
        i++;
    }
};

createTextStrings();

动态添加数字越来越多的文本字符串到div

3 个答案: