네이처리 노트
[javascript] include 구현해보기 본문
728x90
반응형
공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요
script를 불러오는 것을 서버언어로 하면 한줄이면 되지만 자바스크립트는 한줄을 허용하지 않는다.
자바스크립트방식으로 적용해 보았다.
case 1
<!--HTML-->
<body>
<header></header>
<body>// javascript
fetch("가져올 파일 링크입력")
.then(response=>{
return response.text()
})
.then(data => {
document.querySelector("header").innerHTML = data; // body내에 추가한다.
});case 2
스크립트를 추가할거니까 head에 시도해봤다.
head에 덮어씌워진다.
<!-- HTML -->
<head>
<script type="text/javascript" src="Head에 불러올 코드가 들어있는 링크" ></script>
</head>// javascript
fetch("가져올 파일 링크")
.then(response=>{
return response.text()
})
.then(data => {
document.head.innerHTML= data; //head에 추가한다.
});
기존의 script 코드는 보이지않는데, 작동은 한다. (괜찮은거야?)
Reference
1) 언어별 인클루드방식
The Simplest Ways to Handle HTML Includes | CSS-Tricks
It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that
css-tricks.com
728x90
반응형
'개발기록 > Javascript' 카테고리의 다른 글
| [jQuery] 제이쿼리를 사용하기 전에 읽어보기 (0) | 2022.09.07 |
|---|---|
| [javascript] a태그의 href 처럼 클릭없이 링크 이동하기 (0) | 2022.09.07 |
| [javascript] HTML과 script파일 불러오는 방법 (0) | 2022.09.07 |
| [javascript] Ajax와 XMLHttpRequest 그리고 fetch (0) | 2022.09.07 |
| [javascript] event | 전파에러, 버블링현상, 새로고침되는 현상 (0) | 2022.09.07 |
Comments