console.log 和 document.getElementById() 之间的区别

Question

const arr=[1,2,3,4,5];
arr.forEach(function(val){
console.log(val);
})

const arr=[1,2,3,4,5];
arr.forEach(function(val){
document.getElementById("demo").innerHTML=val;
})

输出
5

我的问题是为什么即使使用相同的代码行我得到不同的输出。

Answer 1

Console.log 将输出打印到控制台。 documet.getElementById() return 具有指定值的 Id 属性的元素。两者完全不同。

Answer 2

在下面的代码中：

const arr=[1,2,3,4,5];
arr.forEach(function(val){
document.getElementById("demo").innerHtml=val;
})

对于每个循环，它说 html id 为 demo 的元素设置了新的 innerHtml。因此它将获得值 1，然后被 2、3、4、5 覆盖。最后，您最终的内部 html 将是 5。要显示所有 arr 值，您需要将代码放在单独的元素中：

const arr=[1,2,3,4,5];
arr.forEach(function(val){
document.getElementById("demo" + val).innerHtml=val; 
})

Answer 3

方法 console.log 为每个数组值打印 val：

const arr=[1,2,3,4,5];
arr.forEach(function(val){
    console.log(val);
})

然而，document.getElementById().innerHtml 将更新元素的 innerHtml:

const arr=[1,2,3,4,5];
arr.forEach(function(val){
    document.getElementById("demo").innerHtml=val;
})

在上面的代码中，您覆盖了元素 innerHtml(body) 的当前值。您每次都需要 concatenate 或 append innerHtml 与 val 的当前值。

document.getElementById("demo").innerHTML += val;

Difference between console.log and document.getElementById()