document.write vs console.log vs innerHTML

Posted 2023-05-07

【中文标题】document.write vs console.log vs innerHTML

【英文标题】：

【发布时间】：2020-12-01 09:13:40

【问题描述】：

这里的javascript初学者，我将这些（）相互比较并从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", 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>

【问题讨论】：

因为 innerHTML 替换了内容.....它不是附加的。每次迭代都将 innerHTML 的内容替换为下一项。它只会显示最后一项。

您可以使用+= 代替= 来连接而不是替换。

【参考方案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 中的表达式和运算符的信息