template

미래를 위해 준비된 마크업의 청사진. 페이지 로드 시에는 보이지 않지만, 자바스크립트를 통해 복제해 동적으로 페이지에 삽입할 수 있는 HTML 조각을 정의한다.

<template id="my-paragraph">
  <p>이 문단은 템플릿 안에 있습니다.</p>
</template>

<button onclick="showTemplate()">템플릿 보이기</button>
<div id="container"></div>

<script>
function showTemplate() {
  const template = document.getElementById('my-paragraph');
  const clone = template.content.cloneNode(true);
  document.getElementById('container').appendChild(clone);
}
</script>