使用什么来代替 document.write 或 InnerHTML？

假设我有这样的 html 代码：

<script>
    // just an example function to get data from input
    function getNumber(form) {
var userInput = new Number;
// convert form values into numbers
userInput = Number(form.enteredNumber.value);
return userInput;   
    }
    function countNumbers(form) {
    var lastNumber = getNumber(form); // the last number to be counted
        for (i = 1; i <= lastNumber; i++) { //count the numbers
            document.write(" "+i); // put the numbers on the page
            if((i % 10) == 0) {
            document.write("<br>"); // insert a break 10 by 10 to create a block of numbers
            }
        }
    }
</script>
<form>
Enter a number:<input type="text" name="enteredNumber"/>
<input type="button" value="Count!" onClick="countNumbers(this.form);"/>
</form>
<div id="numberBlocks"></div>

因此，如果用户输入 25，结果将接近我想要的，如下所示：

1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19

20 21 22 23 24 25

但 document.write 会清除整个页面，我不希望这样。 如果我使用：

document.getElementById('numberBlocks').InnerHTML = i;
document.getElementById('numberBlocks').InnerHTML = '<br>';

它只会替换元素的内容，我也不希望这样。 输出将是：

没有任何内容或数字

我该如何做到这一点，在某种程度上，页面内容不会被破坏，输出结果就是我想要的？

document.getElementById('numberBlocks').InnerHTML += i
document.getElementById('numberBlocks').InnerHTML = " " + "<br>";

也不起作用，因为它们会覆盖该元素而不是添加新元素。

这两个会生成与 document.write 相同的结果

res = document.getElementById('numberBlocks');
res.innerHTML = res.innerHTML +" "+i;
res = document.getElementById('numberBlocks');
res.innerHTML = res.innerHTML + "<br>";

好的。经过思考和测试一些事情后，我自己解决了这个问题。正确的做法是：

function countNumbers(form) {
    var lastNumber = getNumber(form); // the last number to be counted
    for (i = 1; i <= lastNumber; i++) { //count the numbers
        var spanNode = document.createElement("span");
        var textNode = document.createTextNode(" " +i);
        spanNode.appendChild(textNode);
        var breakNode = document.createElement("br");
        document.getElementById("numberBlocks").appendChild(spanNode); // put the  numbers on the page
        if((i % 10) == 0) {
            document.getElementById("numberBlocks").appendChild(breakNode);
        }
}