Nov 20, 2022

# Solution 1 :

It’s simply because with innerHTML you are replacing the content of the element, not adding something to it! So every time your loop iterates it just replaces all the html in last iterations with only the last one!

``````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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

<body>
<button onclick='x();'>document.getElementById().innerHTML</button>
<button onclick='y();'>document.write()</button>
<div id="listshow"></div>
</body>
</html>``````

You can see this in the above example. This way both pieces of code result in the same HTML.

# Solution 2 :

document.write() adds some text/html in the document.

innerHTML is the full content of the node. So assigning it will replace the content.
This should work:

``````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>";
``````

Notice the “+=”

# 1. The statement is in different location.

• `.innerHTML = /* ... */` is inside `if (b*(c-1) +i >= a )`, so it will only be executed conditionally.
• `document.write(/* ... */)` is outside the `if (b*(c-1) +i >= a )`, so it will be executed three times.

# 2. The first one overwrites repeatedly, the second one appends.

• `.innerHTML = /* ... */` will change the contents of the node with every call, not add to it.
• `document.write(/* ... */)` will write repeatedly to the same document.

The `document.write()` one is actually more involved – `document.write()` does an implicit `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`

Also, there is an implicit `document.close()` after all write operations have finished. So, if you repeatedly call `document.write()` in a loop, the `document.close()` will only be called after those are finished, and you’d get multiple items written.

So, one way to make them work the same is to add an explicit `document.close()` which will do repeat overwrites, like setting the `.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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

<body>
<button onclick='x();'>document.getElementById().innerHTML</button>
<button onclick='y();'>document.write()</button>
<div id="listshow"></div>
</body>
<script src="script.js"></script>``````

Alternatively, you can make the first function append, instead of overwrite by using the `+=` operator:

``````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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

<body>
<button onclick='x();'>document.getElementById().innerHTML</button>
<button onclick='y();'>document.write()</button>
<div id="listshow"></div>
</body>
<script src="script.js"></script>``````

# Problem :

To be clear with `document.write()`, I know this is outdated and do not want to reload and close the website. So I came up with `document.getElementById().innerHTML` for an alternative.

However, the problem is, `document.getElementById().innerHTML` does not bring me the result I wrote for but `document.write()` does.

So, how can I develop my `document.getElementById().innerHTML` code as the result of using `document.write()`?

I’ve been looking for the differences between `.write` and `.innerHTML` though, could you help me to understand the remarkable differences between two of them with the example I bring in?

Here is the code.

``````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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

<body>
<button onclick='x();'>document.getElementById().innerHTML</button>
<button onclick='y();'>document.write()</button>
<div id="listshow"></div>
</body>
<script src="script.js"></script>``````

Use

### Comment posted by Just Doo

Changed as you suggested, but the rows I want to see does not fully come up.

### Comment posted by Heretic Monkey

Note that in your

### Comment posted by Just Doo

What a glorious day to learn. Thanks for teaching!

### Comment posted by epascarello

because each time you use .innerHTML you replace the contents…. It is not concatenation. If you had

### Comment posted by Just Doo

thought ‘a += b’ is equal to ‘a= a+b’. If I’m right, why your code and += is different?

### Comment posted by Ashkan Pourghasem

I don’t understand what you mean

### Comment posted by Just Doo

Thanks. It helped a bit, but only can see two rows not three rows I mean to.

### Comment posted by Ashkan Pourghasem

@JustDoo That’s because there was another mistake in your loop. In the second one you’re appending outside of that if condition. In the first one it was inside the condition. I fixed that in my example and you can see the results are idenntical.