Html 使用 document.getElementById("demo").innerHTML 打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18502009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
printing using document.getElementById("demo").innerHTML
提问by rajeev
I have the following HTML:
我有以下 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input id="t1" type="text">
<script type="text/javascript">
function myfunction() {
var no=document.getElementById("t1").value;
if(no==""||isNaN(no))
{
alert("Not Numeric");
}
else {
for ( var int = 0; int < no; int++) {
for ( var int2 = 0; int2 <=int; int2++) {
document.write("*");
}
document.write("<br>");
}
}
}
</script>
<button type="button" onclick="myfunction()" >click me</button>
</body>
</html>
The above code is showing output like this after entering the value: 5
上面的代码在输入值后显示如下输出：5
*
**
***
****
*****
But I am not getting the above output after I modified as below:
但是我修改如下后没有得到上面的输出：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input id="t1" type="text">
<script>
function myfunction() {
var no=document.getElementById("t1").value;
if(no==""||isNaN(no))
{
alert("Not Numeric");
}
else {
for ( var int = 0; int < no; int++) {
for ( var int2 = 0; int2 <=int; int2++) {
document.getElementById("demo").innerHTML="*";
}
document.getElementById("demo").innerHTML="<br>";
}
}
}
</script>
<button type="button" onclick="myfunction()" >click me</button>
<p id="demo">A Paragraph.</p>
</body>
</html>
I just want the above output using inner html so that while showing output it will not display in another or new html page.
我只想要使用内部 html 的上述输出，以便在显示输出时它不会显示在另一个或新的 html 页面中。
回答by thgaskell
回答by Steve
The problem is that you overwrite the contents of the demoelement every time you use innerHTML. For example,
问题是demo每次使用时都会覆盖元素的内容innerHTML。例如，
document.getElementById("demo").innerHTML = "Hello ";
document.getElementById("demo").innerHTML = "World";
outputs only "World". To actually output "Hello World", you would have to concatenate the contents of the element with what's already there:
只输出“世界”。要实际输出“Hello World”，您必须将元素的内容与已有的内容连接起来：
document.getElementById("demo").innerHTML = "Hello ";
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + "World";
or shortened:
或缩短：
document.getElementById("demo").innerHTML += "World";
However, accessing the DOM by using document.getElementById("demo")over and over again is very costly. To avoid this, I would suggest you keep track of your output in a temporary variable and then output it into the DOM element at the end, as such:
但是，通过document.getElementById("demo")反复使用来访问 DOM 的成本非常高。为了避免这种情况，我建议您在临时变量中跟踪您的输出，然后在最后将其输出到 DOM 元素中，如下所示：
function myfunction() {
var no=document.getElementById("t1").value,
output = "";
if(no==""||isNaN(no))
{
alert("Not Numeric");
}
else {
for ( var int = 0; int < no; int++) {
for ( var int2 = 0; int2 <=int; int2++) {
output+="*";
}
output+="<br>";
}
document.getElementById("demo").innerHTML = output;
}
}
回答by Ry-
Setting innerHTMLwill overwrite the entire inner HTML of your element each time. But why use innerHTMLimmediately? Just keep one string, query the DOM once, and be less wasteful:
innerHTML每次设置都会覆盖元素的整个内部 HTML。但是为什么要innerHTML立即使用呢？只保留一个字符串，查询一次 DOM，减少浪费：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<input id="t1" type="text">
<button type="button" id="button">Click me</button>
<pre id="demo">A placeholder!</pre>
<script type="text/javascript">
var size = parseInt(document.getElementById("t1").value, 10);
if(!isNaN(size)) {
var result = "";
for(var i = 0; i < size; i++) {
for(var j = 0; j <= i; j++) {
result += "*";
}
result += "\n";
}
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
回答by Praveen
Your code is working as expected. what you need to know is the difference and when to you document.writeand innerHTML
您的代码按预期工作。你需要知道的是区别以及何时对你document.write和innerHTML
document.write:writes HTML expressions or JavaScript code to a document.
document.write：将 HTML 表达式或 JavaScript 代码写入文档。
innerHTML:property sets or returns the inner HTML of an element.
innerHTML:属性设置或返回元素的内部 HTML。
innerHTMLanddocument.writeare not really comparable methods to dynamically change/insert content, since their usage is different and for different purposes.
innerHTML并且document.write不是动态更改/插入内容的真正可比方法，因为它们的用法不同且用于不同的目的。
回答by Dylan MacKenzie
document.writewill append the text to the DOM. innerHTMLsets the content of the given DOM element, so setting innerHTMLwill not append additional asterisks.
document.write将文本附加到 DOM。innerHTML设置给定 DOM 元素的内容，因此设置innerHTML不会附加额外的星号。
Instead:
反而：
for (var int = 0; int < no; int++) {
for (var int2 = 0; int2 <=int; int2++) {
document.getElementById("demo").innerHTML+="*";
}
document.getElementById("demo").innerHTML+="<br>";
}
In general, when you feel like using document.write, there is usually a better way. See this question.
一般来说，当您想使用 时document.write，通常有更好的方法。看到这个问题。
回答by Raghav
Below code is clearing off all the * that is created. Because innerHTML would replace complete contents of demo. Hence concatenate
with results got in for loop
下面的代码正在清除所有创建的 *。因为innerHTML 会替换demo 的完整内容。因此连接
结果进入 for 循环
document.getElementById("demo").innerHTML="<br>";
