innerHTML

質問

JavaScript初心者です。
下記のコード（１）がGoogleの公式サンプルに載っていますが、
私としては（２）の方が分かりやすいと思っています。
コードとして問題がありますでしょうか？

１．
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}

２．

var container=document.getElementById("feed");
var htmlsrc="";
for(var i=0;i<result.feed.entries.length;i++){
var entry=result.feed.entries[i];
htmlsrc+="<div>"+entry.title+"</div>";
}
container.innerHTML=htmlsrc;
}

参考サイト
http://www.ajaxtower.jp/googleajaxfeed/before/index2.html

回答No.1

hitomura · ベストアンサー

一般的にコードは何をやっているのかが即座に分かった方が後から読むのが楽です。
その観点では2. のコードには以下の2点に問題があります。
(1)
　　コードとして途中まで何をやっているのかがわかる事は文字列を作っていることで、
　最後のinnnerHTMLの部分でようやくこのコードでid=feedな要素の中を書き換えていることが
　わかります。
(2)
　　そうやって何をやっているのか分かったところでその中身がどのように書き換わったのかを
　知るにはコードをさかのぼってhtmlsrcがどのように作られているかを確認する必要があります。
　つまり同じコードを2度読むことになります。
　　また、きちんと文書構造が整った文字列になっているかをきちんと検証する必要があります。

1. のコードはそれに比べてDOMによる要素構築という2. の方法よりも学ぶべき事が多い事をやっています。しかしその結果、このコードで何がしたいのかが早めに察することができます。また、どのような風に書き換わったかを処理の流れと使用しているメソッド名で即座に理解でき、きちんとした文書構造になることも適切なメソッドを使うことで保障されます。

お礼

早速のご回答ありがとうございます。

なるほど。実はよく考えて作られたコードだったのですね。
私みたいな初心者には到底及ばない考えでした。

とても勉強になりました。

ありがとうございます。
もう少し（１）のコードを理解していきたいと思います。