2

假设我有这样的 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>";
4

4 回答 4

1

您经常会遇到这样一个事实，即您只想添加一个字符串来让我们说一个段落。在这些情况下，很多人使用 innerHTML。但是，由于 JavaScript 的动态特性，您实际上可以向 Element 对象添加一些行为，如下所示：

Element.prototype.removeAllChildren = function()
{
    while( this.firstChild )
        this.removeChild( this.firstChild );    
};

Element.prototype.setText = function( text )
{
    this.removeAllChildren();

    var node = document.createTextNode( text );

    this.appendChild( node );
};

现在您实际上可以执行以下操作：

var p = document.getElementById( "myParagraph" );
p.setText( "Hello, i'm a paragraph" );

这比 innerHTML 干净得多，因为它使用 dom。但是，它会在您真正想要使用innerHTML 的任何时候涵盖大部分内容。

于 2014-01-17T09:51:31.777 回答
1

好的。在思考和测试了一些事情之后，我自己弄清楚了这一点。正确的方法是：

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);
        }
}
于 2013-05-15T21:43:21.940 回答
1

如果您不想清除页面或元素内容，您应该这样做，使用innerHTML：

function getNumber(form) 
{
    var userInput = new Number;
    userInput = Number(form.enteredNumber.value);
    return userInput;   
}
function countNumbers(form) 
{
    var lastNumber = getNumber(form);
    var res = document.getElementById('numberBlocks');
    //res.innerHTML = "";
    for (var i = 1; i <= lastNumber; i++)
    {
        res.innerHTML = res.innerHTML +" "+i;
        if((i % 10) == 0) 
        {
            res.innerHTML = res.innerHTML + "<br>";
        }
    }
}

如果要清除以前的数据，请取消注释这两行：

//res.innerHTML = "";
于 2013-05-15T19:35:03.887 回答
0

就个人而言，我会使用一个变量来“收集”我想要输出的 html。

使用 jquery：

 function countNumbers(form) {
        var html;
        var lastNumber = getNumber(form); // the last number to be counted
        for (i = 1; i <= lastNumber; i++) { //count the numbers
            html += " " +i); // put the numbers on the page
            if((i % 10) == 0) {
            html += "<br>"
            }
        }

        $('#numberBlocks').html(html);
    }

没有jQuery：

function countNumbers(form) {
    var html;
    var lastNumber = getNumber(form); // the last number to be counted
    for (i = 1; i <= lastNumber; i++) { //count the numbers
        html += " " +i); // put the numbers on the page
        if((i % 10) == 0) {
        html += "<br>"
        }
    }

    document.getElementById("numberBlocks").innerHTML = html;
}
于 2013-05-16T07:16:38.893 回答