document.write vs console.log vs innerHTML

Question

javascript初学者在这里，我将这些(document.write与console.log与innerHTML(相互比较，并从innerHTML获得不同的结果。正如你所看到的，"document.write"one_answers"console.log"打印"fname lname age"，但innerHTML只打印"age"，有人能解释一下吗？

var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
document.write(x+' ')
}

<p id="demo"></p>

console.log版本：

var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
console.log(x+' ')
}

innerHTML版本：

var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
document.getElementById("demo").innerHTML =x+' '
}

<p id="demo"></p>

Answer 1

当您使用innerHTML时，您将用新的文本替换文本。

如果要显示每个值，则需要使用+=运算符，该运算符不会替换字符串，而是将当前的x值添加到所需的HTML元素中。

var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
document.getElementById("demo").innerHTML += x+' '
}

<div id="demo"></div>

此外，您可以为每个person值使用不同的HTML元素。

var person = {fname:"John", lname:"Doe", age:25}; 
let demoIndex = 1;
for(let x in person) {
document.getElementById("demo"+demoIndex).innerHTML =x+' '
demoIndex++;
}

<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>

我推荐第一种选择。

有关JS中表达式和运算符的更多信息，请点击此处