[为了清楚地显示document.write()
,我知道这已经过时了,不想重新加载并关闭网站。所以我想出了document.getElementById().innerHTML
作为替代方案。
但是,问题是,document.getElementById().innerHTML
不能为我带来我写的结果,但是document.write()
可以给我带来结果。
所以,如何证明使用document.getElementById().innerHTML
的结果是document.write()
代码?
尽管我一直在寻找.write
和.innerHTML
之间的差异,您能否通过我带来的示例来帮助我理解两者之间的显着差异?
这里是代码。
var arrlist = ["Aron", "Bill", "Camile", "Denn", "Earling", "Fiora", "Gibson"];
var a = arrlist.length;
var b = 3;
var c = 3;
function x() {
for (var i = 0; i < b; i++) {
var x = b*(c-1) +i;
var k = i + 1;
if (b*(c-1) +i >= a ) {
var x = (b*(c-1) +i)%a;
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>";
}
}
}
function y() {
for (var i = 0; i < b; i++) {
var x = b*(c-1) +i;
var k = i + 1;
if (b*(c-1) +i >= a ) {
var x = (b*(c-1) +i)%a;
}
document.write("<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>");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<button onclick='x();'>document.getElementById().innerHTML</button>
<button onclick='y();'>document.write()</button>
<div id="listshow"></div>
</body>
<script src="script.js"></script>
仅仅是因为使用innerHTML,您正在替换元素的内容,而不是向其中添加内容!因此,每次循环迭代时,它只会将最后一次迭代中的所有html只替换为最后一个html!