어떻게 하면 jQuery를 쓰지 않고 html을 include 할 수 있을까?
기존 jQuery로 html을 include 하는 방법을 보다가
jQuery의 .load()를 바닐라 자바스크립트로 하면 어떻게 구현할 수 있을까 궁금해졌다.
스택오버플로우의 답변을 참고하여 만들었음
이전에 포스팅했던 jQuery 없이 html include하기는 AJAX를 사용해서 하는건데..훨씬 복잡하다.
이번에는 엄청 간단하게 fetch로 할거임!
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>include html without jquery</title>
<script src="./src/main.js" type="module"></script>
</head>
<body>
<!-- https://stackoverflow.com/questions/38132510/equivalent-to-load-without-jquery -->
<header data-include="./include/header.html"></header>
<main data-include="./include/content.html"></main>
<footer data-include="./include/footer.html"></footer>
</body>
</html>
|
cs |
JS - main.js
|
1
2
3
4
|
import { includeHTML } from "./include.js";
/* 실행 */
includeHTML();
|
cs |
JS - include.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export function includeHTML(){
const includeArea = document.querySelectorAll('[data-include]');
for(let dom of includeArea){
const url = dom.dataset.include;
fetch(url)
.then(response => response.text())
.then(data =>{
dom.innerHTML = data;
dom.removeAttribute('data-include');
});
}//for
}//includeHTML
|
cs |
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| ECMAScript 문법 최신 추가된건 어디서 확인하나? (0) | 2021.10.27 |
|---|---|
| OT : 버튼 interaction 카피 구현 (0) | 2021.09.09 |
| 나를 위한 메모 : git에 페이지 만들고 원격으로 push하는 초 간단 방법(윈도우) (0) | 2021.09.02 |
| [vanilla JS] 유튜브 API 없이 타이틀(제목), 썸네일, 작성자 가져오는 방법 (0) | 2021.09.02 |
| vanilla js Challenge - nomade coders (0) | 2021.08.27 |