document.write vs console.log vs innerHTML

Question

javascript 初学者，我将这些（document.write vs console.log vs innerHTML）彼此进行比较，并从 innerHTML 得到不同的结果。如您所见，'document.write' 和 'console.log' 打印 'fname lname age'，但 innerHTML 只打印“年龄”，有人可以解释一下吗？

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 中的表达式和运算符的更多信息 here

document.write vs console.log vs innerHTML

document.write vs console.log vs innerHTML

javascript

html

for-loop

innerhtml

console.log