<h1 class="bandname">はっぴいえんど</h1>
<div class="spec">
  <section class="album album1">
    <h2 class="title"></h2>
    <p class="release"></p>
    <ol class="track"></ol>  
  </section>
  <section class="album album2">
    <h2 class="title"></h2>
    <p class="release"></p>
    <ol class="track"></ol>  
  </section>
  <section class="album album3">
    <h2 class="title"></h2>
    <p class="release"></p>
    <ol class="track"></ol>  
  </section>
</div>
//アルバムデータ
var album1 = {
  title: "はっぴいえんど",
  release: "1970/8/5",
  track: [
    "春よ来い",
    "かくれんぼ",
    "しんしんしん",
    "飛べない空",
    "敵タナトスを想起せよ!",
    "あやか市の動物園",
    "12月の雨の日",
    "いらいら",
    "朝",
    "はっぴいえんど",
    "続はっぴ-いいえ-んど"
  ]
}

var album2 = {
  title: "風街ろまん",
  release: "1971/11/20",
  track: [
    "抱きしめたい",
    "空いろのくれよん",
    "風をあつめて",
    "暗闇坂むささび変化",
    "はいからはくち",
    "はいから・びゅーちふる",
    "夏なんです",
    "花いちもんめ",
    "あしたてんきになあれ",
    "颱風",
    "春らんまん",
    "愛餓を"
  ]
}

var album3 = {
  title: "HAPPY END",
  release: "1973/2/25",
  track: [
    "風来坊",
    "氷雨月のスケッチ",
    "明日あたりはきっと春",
    "無風状態",
    "さよなら通り3番地",
    "相合傘",
    "田舎道",
    "外はいい天気",
    "さよならアメリカさよならニッポン"
  ]
}

//曲名(1枚目)
var album1Title = document.querySelector('.album1 .title');
album1Title.innerHTML = album1.title;

//発売日(1枚目)
var album1Release = document.querySelector('.album1 .release');
album1Release.innerHTML = album1.release;

//曲名(1枚目)
var album1Track = document.querySelector('.album1 .track');
//(1枚目の曲数分)
for (var i=0; i < album1.track.length; i++) {
var list = document.createElement('li');
    list.innerHTML= album1.track[i];
    album1Track.appendChild(list);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.