如何解决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中的表达式和运算符的更多信息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。