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 只打印“age”，有人可以解释一下吗？var person = {fname:"John", lname:"Doe", age:25}; var x;for (x in person) {document.write(x+' ')}<p id="demo"></p>控制台日志版本：var person = {fname:"John", lname:"Doe", age:25}; var x;for (x in person) {console.log(x+' ')}内部 HTML 版本：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 中的表达式和运算符的更多信息，请参见此处