자바스크립트 HTML Template 태그
반응형
Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다.
Template 사용 전 코드
JavaScript 코드
const toolElement = document.createElement('div');
toolElement.innerHTML = `
<h2>Merry Christmas!</h2>
<p>I am so happy</p>
`;Template 사용 코드
JavaScript 코드
const toolElement = document.createElement('div');
const toolTemplate = document.getElementById('tool');
const toolBody = document.importNode(toolTemplate.content,true);
toolBody.querySelector('p').textContent = 'I am so happy';
toolElement.append(toolBody);HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id="tool">
<h2>Merry Christmas!</h2>
<p></p>
</template>
</body>
</html>Template 태그 사용 방법
template 태그는 page가 로드될 때 감추고, JavaScript를 사용하면 화면에 띄워주는 역할을 합니다. 페이지가 로드된 이후에 JavaScript로 랜더링됩니다. body태그 안에 template 태그를 만들고, 안에 사용하고 싶은 html 코드를 작성하면 됩니다.
반응형
'컴퓨터 IT > HTML, CSS' 카테고리의 다른 글
| CSS 자식 형제 자손 결합자 정리 (0) | 2023.03.27 |
|---|---|
| HTML 태그 우선순위 (0) | 2023.01.30 |
| CSS background 꽉차게 넣는 방법 (0) | 2022.12.12 |
| HTML 시맨틱 태그의 모든 것 Semantic Tag (0) | 2022.11.27 |
| CSS 구글 폰트 적용 방법 (0) | 2022.11.17 |