为什么在 for 循环中使用 document.getElementById('').innerHTML 和 document.write() 的结果不一样？

Question

要清楚document.write()，我知道这已经过时了，不想重新加载和关闭网站。所以我想出了 document.getElementById().innerHTML 作为替代方案。

但是，问题是，document.getElementById().innerHTML 没有给我写的结果，但 document.write() 有。

那么，如何使用 document.write() 开发我的 document.getElementById().innerHTML 代码？

虽然我一直在寻找 .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>

Answer 1

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

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 = 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>
</html>

你可以在上面的例子中看到这一点。这样，两段代码都会产生相同的 HTML.

Answer 2

document.write() 在文档中添加一些text/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>";

注意“+=”

Answer 3

1。声明在不同的位置。

.innerHTML = /* ... */在里面if (b*(c-1) +i >= a )，所以只会有条件地执行
document.write(/* ... */)在之外if (b*(c-1) +i >= a )，所以会执行3次

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

.innerHTML = /* ... */ 将在每次调用时更改节点的内容，而不是添加到它。
document.write(/* ... */) 将重复写入同一个文档。

document.write() 一个实际上更复杂 - document.write() 做一个隐含的 document.open(), if not done yet, which allows writing and will clear the current page. From MDN:

calling document.write on a closed (loaded) document automatically calls document.open

此外，在所有写操作完成后还有一个隐含的 document.close()。因此，如果您在循环中重复调用 document.write()，则 document.close() 只会在它们完成后调用，并且您会写入多个项目。

因此，使它们工作相同的一种方法是添加一个明确的 document.close()，它将重复覆盖，例如设置 .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.open() is implicit here */
      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>");
      document.close()
    }
  }
}

<!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>

或者，您可以使第一个函数追加，而不是使用 += 运算符覆盖：

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.open() is implicit here */
      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>

为什么在 for 循环中使用 document.getElementById('').innerHTML 和 document.write() 的结果不一样？

Why the results of using document.getElementById('').innerHTML and document.write() in a for loop are not the same?

javascript

innerhtml

document.write

1。声明在不同的位置。

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