fetch할 내용의 파일을 정하고, 출력되는 내용이 article태그 안에 넣기로 했으므로, 출력되는 원하는 장소를 정해서 article을 입력해줍니다.
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})">HTML</a></li>
<li><a onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})">CSS</a></li>
<li><a onclick="
fetch('javascript').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})">JavaScript</a></li>
</ol>
<!-- <h2>WEB</h2>
<p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are
identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the
Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser
computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN
in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in
August 1991.
</p> -->
<article>
</article>
</body>
</html>'Ajax' 카테고리의 다른 글
| fragment identifier를 이용한 초기 페이지 기능 구현 (0) | 2021.03.12 |
|---|---|
| 리펙토링 - 함수화 (0) | 2021.03.12 |
| fetch API - response 객체 (0) | 2021.03.12 |
| fetch API 기본 사용법 (0) | 2021.03.12 |
| Ajax란? (0) | 2021.03.12 |