用什么代替document.write或InnerHTML? [英] what to use instead of document.write or InnerHTML?
问题描述
说我有这样的html代码:
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>
因此,如果用户输入25,结果将接近我想要的结果,
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
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19
11 12 13 14 15 16 17 18 19
20 21 22 23 24 25
20 21 22 23 24 25
但是document.write会清除整个页面,我不希望那样. 如果我使用:
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.
这两个将产生与document.write相同的结果
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>";
推荐答案
您经常会遇到这样一个事实,您只想向一个段落添加一个字符串.在这些情况下,很多人都使用innerHTML.但是,由于JavaScript的动态特性,您实际上可以向Element对象添加一些行为,如下所示:
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" );
这比使用dom的innerHTML干净得多.但是,只要您真正想要使用innerHTML,它就可以解决问题.
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.
这篇关于用什么代替document.write或InnerHTML?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!