[DOM 다루기] template 태그 이용

<template> 태그는

실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 사용자에게 보이지 않는 HTML 조각입니다. 마크업(HTML)과 구현(Javascript)의 구분이 좀 더 명확하다는 장점이 있습니다.

 

    <!-- html 코드 -->
    <template id = "will-be-rendered">
        <span>I am template tag</span>
    </template>

    <div id = "target">I am div tag</div>

    
    <script src="script.js"></script>

// Javascript 코드
let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

//will-be-rendered 안쪽 내용을 복사합니다 (자식노드를 전부 포함해서)
let newContent = document.importNode(template.content,true);

target.innerHTML = '';
target.appendChild(newContent);

 

위의 html 파일을 로드하면 will-be-rendered 의 id를 가진 template 태그의 내용이 문서에 출력됩니다. 이는 script에서 template태그를 활성화(importNode)시켜주었기 때문입니다. Javascript코드를 실행하지 않고 순수히 html코드만을 로드한다면 template 태그의 내용은 화면에 보이지 않겠지만, importNode()를 통해 숨겨진 html코드를 화면 위로 끌어올렸다는 게 핵심이 되겠습니다.

 

 

---

메소드 정리

Document.importNode(externalNode, deep)

현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있게 해주는 메소드입니다. externalNode는 다른 문서에서 가져올 노드이고, deep은 boolean 타입을 가지는데 가져올 노드의 자식 요소들을 포함하여 가져올 것인지 여부를 나타냅니다.

---

궁금한 것

• iframe(inline frame) 태그: html 웹 문서 안에 또 다른 웹 문서를 넣을 수도 있고 뮤디 등 동영상도 넣을 수 있다.

<iframe src = "URL"> 대체 내용 </iframe>