DOM 조작 (<template> 태그)

• HTML 조각을 HTML 내에 정의할 수 있음

• <template> 태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각

• 마크업(HTML)과 구현(JavaScript)의 구분이 보다 더 철저

 

HTML

<template id="will-be-rendered">
	<span>변경 후</span>
</template>

<div id="target">변경 전</div>

JavaScript

let target = document.querySelector('#target');
let template = document.querySelector('#Will-be-rendered');

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

// target 내용을 비웁니다
target.innerHTML = '';
target.appendChild(newContent);

HTML 출력 결과

<div id="target">
	<span>변경 후</span>
</div>