【JavaScript】for文の結果を1つずつ出力したい

Question

###前提・実現したいこと
forで繰り返した処理を１つずつHTMLページの任意の場所に表示させたいですが、ループの一番最後の結果しか表示がされません。
すべて表示するにはどのように記述をすべきなのでしょうか？

<p id="render"></p>

<!--body閉じタグの前で外部JSファイルを読み込み-->
<script src="js/script.js"></script>

###希望する表示

<p id="render">
0<br>
1<br>
2<br>
3<br>
4<br>
</p>

###期待しない表示（これになってしまいます）

<p id="result">
4<br>
</p>

###試した記述
いずれも「期待しない表示」になってしまいます。

#####NGだった記述その①

for (var i = 0; i < 5; i++) {
	document.getElementById('render').innerHTML = i + '<br>';
}

#####NGだった記述その②

var result = 0;
for (var i = 0; i < 5; i++) {
	result = i + '<br>';
}
document.getElementById('render').innerHTML = result;

例えばdocument.writeを使用すると0～4まですべて表示をさせることはできるのですが、任意の要素の中に入れる方法がわかりません。
なにとぞご教授いただけないでしょうか。

Answer 1

for (var i = 0; i < 5; i++) {
    document.getElementById('render').innerHTML += i + '<br>';
}

Comments

[umauman]

早速回答いただきましてありがとうございます。記述いただいたコードで意図通りの表示になりました。

Answer 2

innerHTML

innerHTML は上書きするので、innerHTML に代入する前に連結した文字列を入れる必要があります。

• innerHTML - JSFiddle

var result = [];
for (var i = 0; i < 5; i++) {
    result.push(i);
}
document.getElementById('render').innerHTML = result.join('<br>');

insertAdjacentHTML

HTMLを挿入するなら insertAdjacentHTML を使います。
(※innerHTML を += で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)

• insertAdjacentHTML - JSFiddle

var element = document.getElementById('render');
for (var i = 0; i < 5; i++) {
  element.insertAdjacentHTML('beforeend', i + '<br>');
    result = i;
}

createDocumentFragment()

ノードを挿入するなら、createDocumentFragment を使います。
今までの方法はHTMLタグを挿入or上書きするものでしたが、ノードで扱う事で特殊文字(<>&"')のエスケープミスによる不具合(XSS)から解放されます。

• createDocumentFragment() - JSFiddle

var df = document.createDocumentFragment(), br = document.createElement('br');

for (var i = 0; i < 5; i++) {
  df.appendChild(document.createTextNode(i));
  df.appendChild(br.cloneNode(false));
}

document.getElementById('render').appendChild(df);

Re: umauman さん

Comments

[umauman]

innerHTMLは上書きされてしまうのですね。色々な挿入の記述を教えていただきありがとうございます。特に「insertAdjacentHTML」についてもっと調べてみます。セキュリティに留意するのであればここまで書けるようにならないといけないのですね。色々と調べるきっかけになりそうです。ありがとうございました。

[umauman]

これも重要そうですね。
>(※innerHTML を += で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)

Answer 3

原因

それぞれのコードがなぜ思い通りに動かなかったか説明すると

一つ目は#renderのHTMLを毎回変えているが、
前の処理を上書きしているから最後の処理しか反映されない

for (var i = 0; i < 5; i++) {
    document.getElementById('render').innerHTML = i + '<br>';
}

二つ目も上と同じで変数の中身を毎回上書きしているから

var result = 0;
for (var i = 0; i < 5; i++) {
    result = i + '<br>';
}
document.getElementById('render').innerHTML = result;

解決策

それぞれの代入の時に=ではなく+=を使うことで前の値に追加で入れることが出来ます。

for (var i = 0; i < 5; i++) {
    document.getElementById('render').innerHTML += i + '<br>';
}

var result = "";
for (var i = 0; i < 5; i++) {
    result += i + '<br>';
}
document.getElementById('render').innerHTML = result;

2017年4月26日 午後9時28分 ソースコードを一部修正

Comments

[kei344]

解決策2つ目のコードは実行結果が下記のようになりますよ。
00
1
2
3
4
https://jsfiddle.net/4otqg539/

[umauman]

「+=」とするところが追加していく上でのポイントなのですね。とても丁寧にわかりやすくご説明いただきありがとうございます！

Answer 4

NGだった記述はどちらも上書きされて最終的な結果しか表示されていません。
サンプル記述していましたがKosuke_Shibuyaさんが回答されていたのでひかえておきます。
追記しないとだめということですね。

document.getElementById('render').append(i + '<br>');

試していませんが追記なのでこれでもできると思います。

Comments

[umauman]

ご回答ありがとうございます。いただいたコードですと、<br>の部分はそのまま文字列としてページに表示がされるものの「append」ですと、上書きされずにすべてが表示されることがわかりました。
勉強になりました。

Answer 5

var result = '';
for (var i = 0; i < 5; i++) {
    result += i + '<br>'; // 「result = 」では中身を全部上書きしてしまう。
}
document.getElementById('render').innerHTML = result;

Comments

[umauman]

”「result = 」では中身を全部上書きしてしまう。”のコメントありがとうございます。
「var result = '';」の部分も「0を入れておいたらダメなのかな？」と思ったのですが、他の回答者様の補足でなんとなく理解できた気がします。