时间戳

首页 > 解决方案 > 为什么在 for 循环中使用 document.getElementById('').innerHTML 和 document.write() 的结果不一样？

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

问题描述

需要明确的是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>

标签： javascriptinnerhtmldocument.write

解决方案

这仅仅是因为使用 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。

推荐阅读