<h1 class="bandname">はっぴいえんど</h1>
<div class="spec">
  <section class="album">
    <h2 class="title"></h2>
    <p class="release"></p>
    <ol class="track"></ol>
  </section>
</div>
</section>

//アルバムデータ
var albums = [
{ //1枚目
  title: "はっぴいえんど",
  release: "1970/8/5",
  track: [
    "春よ来い",
    "かくれんぼ",
    "しんしんしん",
    "飛べない空",
    "敵タナトスを想起せよ!",
    "あやか市の動物園",
    "12月の雨の日",
    "いらいら",
    "朝",
    "はっぴいえんど",
    "続はっぴ-いいえ-んど"
  ]
},
{ //2枚目
  title: "風街ろまん",
  release: "1971/11/20",
  track: [
    "抱きしめたい",
    "空いろのくれよん",
    "風をあつめて",
    "暗闇坂むささび変化",
    "はいからはくち",
    "はいから・びゅーちふる",
    "夏なんです",
    "花いちもんめ",
    "あしたてんきになあれ",
    "颱風",
    "春らんまん",
    "愛餓を"
  ]
},
{ //3枚目
  title: "HAPPY END",
  release: "1973/2/25",
  track: [
    "風来坊",
    "氷雨月のスケッチ",
    "明日あたりはきっと春",
    "無風状態",
    "さよなら通り3番地",
    "相合傘",
    "田舎道",
    "外はいい天気",
    "さよならアメリカさよならニッポン"
  ]
}
]


//外枠アクセス
var spec = document.querySelector('.spec');

//テンプレ複製
//（アルバム枚数-1枚）
for (var i=1; i < albums.length; i++) {
  var clone = spec.firstElementChild.cloneNode(true);
  spec.appendChild(clone);
}


//タイトル、発売日、曲名アクセス
var specTitle = document.querySelectorAll('.title');
var specRelease = document.querySelectorAll('.release');
var specTrack = document.querySelectorAll('.track');


//アルバムデータ入力（アルバム枚数分）
for (var i=0; i < albums.length; i++) {  
  //タイトル入力
  specTitle[i].innerHTML = albums[i].title;
  //発売日入力
  specRelease[i].innerHTML = albums[i].release;
  //曲名入力（曲数分ループ）
  for(var t=0; t < albums[i].track.length; t++) {
    var list = document.createElement('li');
    list.innerHTML= albums[i].track[t];
   specTrack[i].appendChild(list);        
  }   
}