[JS] html 안에 다른 html 파일 불러오기

html 안에 html을 넣고 싶었다.

html로 문서를 작성 중이었는데 하나의 파일이 너무 지저분해지는 것 같아서 각 세부내용들은 다른 파일에 작성하고 불러오는 것이 목적이었다.

 

 

위처럼 contents라는 id를 가진 div 안에 contents.html에 작성된 내용을 넣고 싶었다.

 

Javascript의 fetch를 이용해서 html text를 가져와 innerHtml을 이용하면 손쉽게 해결할 수 있었다.

물론 이 방법은 index.html을 그냥 브라우저에서 여는 형식으로는 동작하지 않는다. fetch를 이용하는 방법이기에 이 글을 읽는 사람이라면 알고 있을 것이다.

 

 

 

async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

async function importPage(target) {
    document.querySelector('#' + target).innerHTML = await fetchHtmlAsText(target + '.html');
}

 

위의 두 가지 함수만 이용하면 id로 요소를 검색한 뒤 해당 요소 안에 id와 동일한 파일명의 html을 넣을 수 있다.

 

 

이렇게 사용하면

 

contents라는 id를 가진 div 안에 contents.html의 내용이 들어가는 것을 확인할 수 있다.

 

 

 

---

Reference

• stack overflow, How do I load an HTML page in a div using JavaScript?