<script>
  function fetchPage(name){ //name은  데이터의 변수명
   //fetch안에 들어갈 변수는 html 또는 데이터를 가져올 경로 그리고 then은 데이터를 가지러 간 후 callback 함수
   fetch(name).then(function(response){  
   // text()는 경로에서 가져온 데이터 그 다음 then은 그 데이터로 실행할 함수 이다.
      response.text().then(function(text){
      // 여기서는 article 태그에 text데이터를 삽입한다
        document.querySelector('article').innerHTML = text;
      })
    });
  }
  </script>

  <ol id="nav">
 
  </ol>

<script>
// list 파일에서 ajax하여 데이터를 읽어온다.
 fetch('list').then(function(response){
    response.text().then(function(text){
//가져온 문자열의 데이터를 , 단위로  끊어서 배열에 넣어준다.
      var items = text.split(',');
 // i와 tags는 반복문을 돌려주는 용도와 추가할 태그를 담기위한 변수
      var i = 0;
      var tags = '';
      while(i<items.length){
        var item = items[i];
        item = item.trim();
        //추가할 <li>태그를 적어준다 <a>와 그리고 값이 들어가야할 자리에는 item을 넣어준다('' 와""를 적절하게 사용하여 변수 대입)
        var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        i = i + 1;
      }
      //id가 nav인 태그에 삽입
      document.querySelector('#nav').innerHTML = tags;
    })
  });
  
  </script>

html,css,javascript,ajax

 <script src="../fetch.js"></script>