[DOM] <template> 태그를 이용한 DOM 조작

오늘은 <template> 태그를 이용해서 DOM을 조작하는 방법에 대해서 공부했다. 

 

동적으로 태그를 추가하고 싶은데 추가되는 동작이 반복된다면 반복문을 이용해서 넣어 줄 수도 있지만 

<template> 태그를 이용해서 해결할 수도 있다.

 

먼저 html을 간단하게 작성해보면

<template id="temp"> <!-- <template> 태그안에 있는 요소는 <template> 활성화 전까지 나타나지않는다. -->
  <li>
    <div id="name">Leo</div>
    <div id="age">25</div>
    <div id="address">집주소</div>
  </li>
</template>

<div id="parents">부모 요소</div> <!-- 나중에 <template>안에 요소를 추가할 위치 -->

<template> 태그 안에 있는 요소는 나타나지 않고 맨 마지막 줄의 div 만 나타난다.

 

이제 이 <template>을 js를 통해서 추가해볼 수 있다.

 

let parents = document.querySelector('#parents');
let temp = document.querySelector('#temp');

let element = document.importNode(temp.content, true); // importNode를 통해서 template 안에 있는 요소들을 복사해온다.
parents.appendChild(element); // 부모요소가 될 parents 안에 element 를 넣어준다.

let element2 = document.importNode(temp.content, true);
element2.querySelector('#name').textContent = 'nick'; // 복사된 element2안의 name 값을 변경이 가능하다.
parents.appendChild(element2); 

결과창

실행 결과 코드

 

직접 코드를 돌려보면 부모요소 아래에 나란히 들어간 것을 볼 수 있다.

 

또한 원래의 <template> 는 그대로 남아 있는 것으로 보아 부모 요소 아래에 복제된 것을 알 수 있다. (주석도 복사가 된다!)

 

이렇게 template를 이용하면 간단하게 반복되는 요소들을 추가할 수 있다.