include html

html에서 html을 포함하는 방법이 없을까?

한때는 "html import" 지원이 일부 웹브라우져에서 지원 되었지만 여러가지 이유로 인해서 사라진 기능이다.
jquery의 로드나 W3School의 includeHTML은 웹서버의 폴더에서 실행해야 정상적으로 실행이 된다.

innerHTML과  Template Strings을 이용해서 HTML import를 대체해보자.
import HTML처럼 HTML에 직접 추가는 안되고 자바스크립트로 추가해야 한다.

여러라인의 문자열을 사용 할려면 다음과 같이 두가지 방법으로 사용한다.

첫째 방법
const bookStyle =
   ".book-style { "
   +"   display: block;"
   +"   width: 300px;"
   +"   background-color: gold;"
  +"}";

둘째 방법
const bookStyle =
   ".book-style { \
        display: block; \
        width: 300px; \
        background-color: gray; \
    }";

Template Strings 사

Template Strings을 사용하면 다음과 간단하게 할수 있다.

Template Strings은 " 문자도 아니고 ' 문자도 아닌 어퍼스트로피 ` 문자를 사용한다.

Template Strings으로 표현하면 다음과 같다.

const bookStyle = `
    .book-style {
        display: block;
        width: 300px;
        background-color: gold;
    }
`;

문자열 중간에 변수도 넣을수 있다.
$와 중괄호를 사용해 변수를 사용 할수도 있다.

${변수}

const markup = `
 <div class="book-style">
    <h2>${book.title}</h2>
    <p>index = ${book.index}</p>
    <p>price = ${book.price}</p>
 </div>
`;

스타일 Class 추가

자바스크립트에서 스타일 클래스를 추가하는 함수는 다음과 같다.

function writeStyles(styleNameId, cssText) {
    var styleElement = document.getElementById(styleNameId);
    if (styleElement)
        document.getElementsByTagName('head')[0].removeChild(styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleNameId;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

다음과 같이 사용한다.
문자열 bookStyle의 ".book-style" 클래스가 헤더에 추가된다.

writeStyles('book_style_id', bookStyle);

추가된 스타일의 클래스를 노드 트리에서 보면 다음과 같다.


writeStyles과 innerHTML 사용


writeStyles을 사용해 클래스를 추가하고 innerHTML을 사용해 본문에 요소를 추가해 보자.

template_test.html 파일
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Template Strings Test</title>
    <style>

    </style> 
</head>
<body>

</body>
<script src="mytemplate.js"></script> 
<script>
writeStyles('book_style_id', bookStyle);
document.body.innerHTML = markup;
</script>
</html>

mytemplate.js 파일
const book = {
    index: 777,
    title: 'C++ master',
    price: '30000 won'
}

const markup = `
 <div class="book-style">
    <h2>${book.title}</h2>
    <p>index = ${book.index}</p>
    <p>price = ${book.price}</p>
 </div>
`;

const bookStyle = `
    .book-style {
        display: block;
        width: 300px;
        background-color: gold;
    }
`;

function writeStyles(styleNameId, cssText) {
    var styleElement = document.getElementById(styleNameId);
    if (styleElement)
        document.getElementsByTagName('head')[0].removeChild(styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleNameId;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

출력결과는 다음과 같다.


테스트 파일:
mytemplate.js
template_test.html

참조)
https://wesbos.com/template-strings-html/

W3school. w3-include-html  사용
https://www.w3schools.com/howto/howto_html_include.asp
http://webpublishing.tistory.com/80
http://sjh836.tistory.com/52