文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么在for循环中使用document.getElementById('').innerHTML和document.write()的结果不一样？

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

Stack Overflow用户
提问于 2020-01-24 13:47:06
回答 3查看 328关注 0票数 1

为了明确document.write()，我知道这是过时的，不想重新加载和关闭网站。所以我想出了一个替代方案-- document.getElementById().innerHTML。

然而，问题是，document.getElementById().innerHTML并没有给我带来我所写的结果，但是document.write()给我带来了结果。

因此，如何将document.getElementById().innerHTML代码作为使用document.write()的结果来开发？

我一直在寻找.write和.innerHTML之间的不同之处，你能帮我用我介绍的例子来理解它们之间的显著差异吗？

这是密码。

​

代码语言：javascript
复制
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>");
  }
}
代码语言：javascript
复制
<!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
document.write
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-01-24 13:50:19

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

​

代码语言：javascript
复制
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>");
  }
}
代码语言：javascript
复制
<!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。

票数 4
EN

Stack Overflow用户

发布于 2020-01-24 13:52:50

document.write()在文档中添加了一些text/html。

innerHTML是节点的全部内容。因此，分配它将取代内容。这应该是可行的：

代码语言：javascript
复制
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>";

注意"+=“

票数 1
EN

Stack Overflow用户

发布于 2020-01-24 13:58:41

1.发言地点不同。

  • .innerHTML = /* ... */是 if (b*(c-1) +i >= a )中的，因此只能有条件地执行。
  • document.write(/* ... */)是 if (b*(c-1) +i >= a )之外的，因此它将执行三次。

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

  • .innerHTML = /* ... */将通过每次调用来更改节点的内容，而不是添加到其中。
  • document.write(/* ... */)将重复写入同一文档。

实际上，document.write()一个更复杂--如果还没有完成，document.write()会执行一个隐式document.open()，这将允许写入并清除当前页面。来自MDN

在已加载的关闭文档上调用document.write自动调用document.open

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

因此，让它们同样工作的一种方法是添加一个显式document.close()，它将执行重复覆盖，比如设置.innerHTML

​

代码语言：javascript
复制
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()
    }
  }
}
代码语言：javascript
复制
<!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>

​

或者，您可以添加第一个函数，而不是使用+=操作符来覆盖：

​

代码语言：javascript
复制
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>");
    }
  }
}
代码语言：javascript
复制
<!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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59897730

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档