document.write vs console.log vs innerHTML

问题描述

在这里

javascript初学者，我正在将它们（document.write与console.log与innerHTML）相互比较，并从innerHTML得到不同的结果。 如您所见，“ document.write”和“ 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",age:25}; 
var x;
for (x in person) {
console.log(x+' ')

}

innerHTML版本：

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

}

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

解决方法

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