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};&nbsp;var x;for (x in person) {&nbsp; document.getElementById("demo").innerHTML += x+' '}<div id="demo"></div>此外，您可以为每个person值使用不同的 HTML 元素。var person = {fname:"John", lname:"Doe", age:25};&nbsp;let demoIndex = 1;for(let x in person) {&nbsp; document.getElementById("demo"+demoIndex).innerHTML =x+' '&nbsp; demoIndex++;}<div id="demo1"></div><div id="demo2"></div><div id="demo3"></div>我推荐第一个选项。有关 JS 中的表达式和运算符的更多信息，请参见此处