what to use instead of document.write or InnerHTML?

问题

Say I have an html code like this:

<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>

So if user entered 25 the result would be close to what I want, like this:

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

But the document.write clears the entire page, and I don't want that. If I use:

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

it will merely replace the contents of the element, I don't want that either. the output will be:

nothing or a number<--- since the last element will be a break tag or a number.

How do I do this, in a way, the content of page isn't destroyed and the output result is what I want?

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

won't work either, since they will overwrite the element instead of adding new ones.

And these two would generate the same result as document.write

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

回答1:

OK. after thinking and testing a few things I figured this out by my own. the correct way do to this is:

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);
        }
}

回答2:

If you don't want to clear page or element content, you should do it like this, using 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>";
        }
    }
}

And if you want to clear previous data uncomment these two lines:

//res.innerHTML = "";

回答3:

You will often come across the fact that you just want to add a string to lets say a paragraph. In these cases lot's of people use innerHTML. However, because of the dynamic nature of JavaScript, you could actually add some behaviour to the Element object like this:

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 );
};

Now you can actually do something like this:

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

This is much cleaner than innerHTML as it uses the dom. However, it will cover moslty any time you really want to use the innerHTML.

回答4:

Personally, I'd use a variable to "collect" the html I want to output.

With 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);
    }

Without 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;
}

来源：https://stackoverflow.com/questions/16573431/what-to-use-instead-of-document-write-or-innerhtml

标签

javascript

innerhtml

document.write