[6] AJAX - Ol의 li를 ajax로 호출하기

o:kcalb·2023년 1월 2일
0

Ajax

목록 보기
6/9
post-thumbnail

fetch API와 querySelector, innerHTML 을 사용하여
list에 있는 내용을 ol#nav에 넣어보았다.

HTML 파일

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

<script>
	// list
    fetch('list').then(function(response){
      response.text().then(function(text){
        document.querySelector('#nav').innerHTML = text;
      });
    });
</script>

list 파일

<li><a href="#!html" onclick="fetchPage('html')">html</a></li>
<li><a href="#!css" onclick="fetchPage('css')">css</a></li>
<li><a href="#!javascript" onclick="fetchPage('javascript')">javascript</a></li>
<li><a href="#!ajax" onclick="fetchPage('ajax')">ajax</a></li>
profile
모든 피드백 받습니다 😊

0개의 댓글

관련 채용 정보