[JavaScript, JQuery] HTML Import 하는 방법

Frontend 서버 프레임워크 없이 순수 JavaScript, JQuery, HTML, CSS 등으로만 작업하면서, HTML Import로 코드 분리 및 재활용을 하고 싶어, 여러 방법등을 고민해 보았으나, FE 서버 프레임워크를 사용 하지 않을 땐 JQuery가 가장 깔끔 한 것 같아, 해당 방법을 선택하였다.

 

 

모든 파일에서 공용으로 쓰고 싶은 nav영역의 nav.html을 작성 해두었다고 가정

 

main.html

<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="bar-nav">
    <script>$("#bar-nav").load( "/templates/nav.html" );</script>
</nav>