Question

我正在使用w3school.com JavaScript编译器测试基本程序，因为我正在学习JavaScript。

我注意到的第一件事就是在以下片段中：

<!DOCTYPE html>

<html>
<body>

<h1>My First Web Page</h1>    
<p>My first paragraph</p>    
<p id = "demo"></p>    

<script>

 var x = 4;
 var y = 8;
 var z = x + y;
 var car = "Fiat";

 document.getElementById("demo").innerHTML = z;
 //document.getElementById("demo").innerHTML = car;

</script>

</body>
</html>

当我取消注释第二个document.getElementById时，第一个12不再显示;即仅显示Fiat。这是为什么？如何只显示多个变量内容？

Answer 1

您正在更新元素的 innerHTML 属性，该属性将使用新的html内容删除现有的html内容。

删除所有元素的子元素，解析内容字符串并将结果节点指定为元素的子元素。（ Taken from here ）

然后，您可以使用简单的字符串连接组合多个字符串

document.getElementById("demo").innerHTML = z + '<br/>' + car;

或

document.getElementById("demo").innerHTML = z;
document.getElementById("demo").innerHTML += '<br/>' + car;

仅供参考：更新innerHTML属性并不是一个好主意，因为它会重新生成所有html元素，它会删除所有附加的事件处理程序到内部元素。所以在使用它时要小心。

Answer 2

当我取消注释第二个文档时.getElementById第一个文档（12）不再显示

这是因为您在未注释的行中覆盖了标识为demo的元素的内容。您应该使用两个不同的元素来显示不同的内容，或者使用+

将内容附加到同一个元素

要么：

document.getElementById("demo1").innerHTML = z;
document.getElementById("demo2").innerHTML = car;

或遵循Pranav的建议。

document.getElementById（）

2 个答案: