Javascript 为什么在for循环中使用document.getElementById（'；'；）.innerHTML和document.write（）的结果不同？

为了澄清

document.write（）

，我知道这已经过时，不想重新加载并关闭网站。因此，我提出了

document.getElementById（）.innerHTML

作为替代方案

但是，问题是，

document.getElementById（）.innerHTML

不会为我带来我编写的结果，但是

document.write（）

会

那么，如何使用

document.write（）

开发

document.getElementById（）.innerHTML

代码呢

我一直在寻找

.write

和

.innerHTML

之间的差异，但是，您能通过我带来的示例帮助我理解它们之间的显著差异吗

这是代码

var arrlist=[“阿隆”、“比尔”、“卡米尔”、“丹尼”、“厄林”、“菲奥拉”、“吉布森”]；
var a=arrlist.length；
var b=3；
var c=3；
函数x（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
document.getElementById（'listshow'）.innerHTML=“+c+”第四个名称列表“+k+”第三个“+arrlist[x]+”；
}
}
}
函数y（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
}
文件。写（“+c+”第个名称列表“+k+”第“+arrlist[x]+”）；
}
}

document.getElementById（）.innerHTML
document.write（）

原因很简单，因为使用innerHTML，您将替换元素的内容，而不是向元素添加内容！因此，每次循环迭代时，它只会用最后一次迭代替换上一次迭代中的所有html

var arrlist=[“阿隆”、“比尔”、“卡米尔”、“丹尼”、“厄林”、“菲奥拉”、“吉布森”]；
var a=arrlist.length；
var b=3；
var c=3；
函数x（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
}
document.getElementById（'listshow'）.innerHTML=document.getElementById（'listshow'）.innerHTML++++“c++”第四个名称列表“+k++“第三个”+arrlist[x]+”；
}
}
函数y（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
}
文件。写（“+c+”第个名称列表“+k+”第“+arrlist[x]+”）；
}
}

document.getElementById（）.innerHTML
document.write（）

原因很简单，因为使用innerHTML，您将替换元素的内容，而不是向元素添加内容！因此，每次循环迭代时，它只会用最后一次迭代替换上一次迭代中的所有html

var arrlist=[“阿隆”、“比尔”、“卡米尔”、“丹尼”、“厄林”、“菲奥拉”、“吉布森”]；
var a=arrlist.length；
var b=3；
var c=3；
函数x（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
}
document.getElementById（'listshow'）.innerHTML=document.getElementById（'listshow'）.innerHTML++++“c++”第四个名称列表“+k++“第三个”+arrlist[x]+”；
}
}
函数y（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
}
文件。写（“+c+”第个名称列表“+k+”第“+arrlist[x]+”）；
}
}

document.getElementById（）.innerHTML
document.write（）

document.write（）在文档中添加一些文本/html

innerHTML是节点的完整内容。因此，分配它将替换内容。 这应该起作用：

document.getElementById('listshow').innerHTML += "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";

document.getElementById（'listshow'）.innerHTML++=“c+”第个名称列表“+k+”第“+arrlist[x]+”；

请注意“+=”

文档。write（）在文档中添加了一些文本/html

innerHTML是节点的完整内容。因此，分配它将替换内容。 这应该起作用：

document.getElementById('listshow').innerHTML += "<table border='1' width='200px'><thead><tr><th colspan='2'>" +c+ "th list of names</th></tr></thead> <tbody><tr><th width='30%'>" +k+ "th</th><td width='70%' >"+arrlist[x]+ "</td></tr></tbody></table>";

document.getElementById（'listshow'）.innerHTML++=“c+”第个名称列表“+k+”第“+arrlist[x]+”；

请注意“+=”

1。该语句位于不同的位置。

• .innerHTML=/**/=a）

  ，则代码>在内部

  ，因此它只会有条件地执行

• document.write（/*…*/）

  在

  之外，如果（b*（c-1）+i>=a）

  ，那么它将执行三次

2.第一个重复覆盖，第二个追加。

• .innerHTML=/**/

  将在每次调用时更改节点的内容，而不是添加到其中

• 文档。写入（/*…*/）

  将重复写入同一文档

document.write（）

一个实际上更为复杂-

document.write（）

如果尚未完成，则会执行一个隐式操作，允许写入并清除当前页面：

调用文档。在已关闭（加载）的文档上写入会自动调用

文档。打开

此外，在所有写入操作完成后，还有一个隐式的。因此，如果您在循环中重复调用
document.write（）
，则只有在这些操作完成后才会调用
document.close（）
，并且您会得到多个写入项

因此，使它们工作相同的一种方法是添加一个显式的
document.close（）
，它将执行重复覆盖，如设置
.innerHTML
：


var arrlist=[“阿隆”、“比尔”、“卡米尔”、“丹尼”、“厄林”、“菲奥拉”、“吉布森”]；
var a=arrlist.length；
var b=3；
var c=3；
函数x（）{
对于（变量i=0；i=a）{
变量x=（b*（c-1）+i）%a；
document.getElementB