var num = ["161203","161204","161231","170110","170122","170125"];
jQuery.each(num,function() {
  var path = 'info/'+ this + '.html';
  $("#" + this).load(path);
});

表示部分はinnerHTMLを使いました。

var hoge = ""
var id = ["170125","170122","170110","161231","161204","161203"];
$.each(id,function(i,value){
  hoge += "<section class='sec'><div id=\'" + value + "\'</div></section>";
});
var elem = document.getElementById("infomation");
elem.innerHTML = hoge

$(“#” + 170101).load(info/170101)とloadしたら、

でloadした部分が表示されます。

今回はinnerHTMLを使ってinformationというidがついた部分にtagを打ち込んでいます。

昔はdocument.writeというものもあったみたいですが、HTML5では非推奨だそう。

innerHTMLで注意すべき店はタグ内の要素はシングルクォートでくくらないといけないってことですね。タグ自体をダブルクォートでくくっているので。ところでこのコード閉じカッコがないな。。。なんで動いたんだ。

参考

HTML要素の中身を変えるinnerHTML | JavaScript入門編

filelistが書かれている別ファイルからloadするpathを読み込む

loadだpathだややこしい説明になってすみません。

今回やりたかった、infoフォルダ以下の内容を動的に読み込むって、そもそもwebサーバ内のフォルダを除く行為なわけで、クライアントで動くjavascriptでできるわけもないんですね。

代替案として以下のようなfilelistを用意します。

info/filelist

170101
170103
170121

javascriptでこのファイルを改行で区切って読み込み、配列として取得。あとはその配列を上の例でloopして表示とloadを行います。

load file list from external file · takeshe12/toketenakunaru@a7053eb · GitHub

ファイルリストを出すためにゴミシェルも書きました。

// get early 3 file from info file list.
var arr = [];
$.ajax({
  url: 'infolist',
  async:false, //wait to finish ajax connection
  success: function(data){
    arr = data.split(/\r\n|\r|\n/);
    arr.pop(); //delete end value
    var infotag = ""
    $.each(arr,function(i,value){
      infotag += "<section class='sec'><div id=\'" + value + "\'></div></section>";
    });
    var elem = document.getElementById("infomation");
    elem.innerHTML = infotag
  }

ここで謎にajaxを使っています。ちなみにajaxのことは何も知りません。（笑）

確か非同期通信を実現するためのjavascriptを使った実装の1つ、ですかね。

今回localhostのfilelistを取得して、取得に成功したら(success)、そのdataを改行でsplitし、arrayに代入。そのあとその値をtagに打ち込んでinnerHTMLとして更新しています。

ajaxのキモが非同期なわけですが、ここではあえてasync falseとして同期処理としています。同期処理の場合、まだレスポンスが返ってきていないのでタグ生成時にはvalueがundefinedとなってしまいました。そのためasync falseとすることで解決しましたが、良いやりかたではない気もします。

ちなみにここのarr変数はグローバル変数にしているのでpathをloadするほうでもそのまま使えました。javascriptの変数スコープについては以前勉強したので知っていて、むやみにグローバル変数にするのはよくないのは知っていますが今回はこのまま。