template
template은 html 코드 상에 작성하여 사용하고 같은 형식을 여러번 출력하는 상황이 있을 때 주로 사용한다 이 방식을 사용하면 자바스크립트에서 html코드를 작성하지 않고 selector를 이용하여 template를 호출하여 사용이 가능하다 사용 방법은 아래와 같다
1
2
3
4
5
6
7
8
<template id="commentTemplate">
<li class="comment">
<div class="username">steve</div>
<div class="contents">스티브가 쓴 글</div>
<div>2019-10-11</div>
<div class="buttons"></div>
</li>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let registerButton = document.querySelector('#register');
registerButton.onclick = function () {
if ('content' in document.createElement('template')) {
let id = document.querySelector('#username').value;
let content = document.querySelector('#new-tweet').value;
let commentTemplate = document.querySelector('#commentTemplate');
let clone = commentTemplate.content.cloneNode(true);
let tempDiv = clone.querySelectorAll('div');
console.log(tempDiv);
tempDiv[0].textContent = id;
tempDiv[1].textContent = content;
tempDiv[2].textContent = '12:20:20';
let parent = document.querySelector('.comments');
parent.appendChild(clone);
}
};
위와 같이 탬플릿을 html에 저장하고 javascript코드에서 호출해서 노드를 각각 쿼리 셀렉터로 찾아 배열에 할당하고 이 배열에 요소에 textContent를 이용하여 데이터를 집어넣었다
