使用document.getElementById(“demo”）.innerHTML进行打印

printing using document.getElementById("demo").innerHTML

本文关键字：innerHTML 打印 demo document getElementById 使用      更新时间：2023-09-26

我有以下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>

上面的代码显示了输入值后的输出：5

*
**
***
****
*****

但在我修改如下后，我没有得到上面的输出：

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

我只希望上面的输出使用内部html，这样在显示输出时，它就不会显示在另一个或新的html页面中。

问题是每次使用innerHTML时都会覆盖demo元素的内容。例如，

document.getElementById("demo").innerHTML = "Hello ";    
document.getElementById("demo").innerHTML = "World";

仅输出"世界"。要真正输出"Hello World"，您必须将元素的内容与已经存在的内容连接起来：

document.getElementById("demo").innerHTML = "Hello ";    
document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + "World";

或缩写：

document.getElementById("demo").innerHTML += "World";

然而，通过反复使用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;
    }
}

您应该使用+=而不是=来附加到HTML中的元素，否则您只会覆盖它。

jsfiddle

JavaScript

...
document.getElementById("demo").innerHTML+="*";
}
document.getElementById("demo").innerHTML+="<br>";
...

document.write将把文本追加到DOM中。innerHTML设置给定DOM元素的内容，因此设置innerHTML不会附加额外的星号。

相反：

for (var int = 0; int < no; int++) {
    for (var int2 = 0; int2 <=int; int2++) {
        document.getElementById("demo").innerHTML+="*";
    }
    document.getElementById("demo").innerHTML+="<br>";
}

一般来说，当您想使用document.write时，通常有更好的方法。请参阅此问题。

下面的代码将清除所有创建的*。因为innerHTML将取代演示的全部内容。因此，将
与循环的结果连接起来

 document.getElementById("demo").innerHTML="<br>";

您的代码正在按预期工作。您需要知道的是差异以及document.write和innerHTML

document.write:将HTML表达式或JavaScript代码写入文档。

innerHTML:属性设置或返回元素的内部HTML。

innerHTML和document.write不是真正可与动态更改/插入内容，因为它们的用法不同，并且用于不同的目的。

每次设置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>
相关文章：