728x90
반응형
append()
코드 넣기 append()
<!DOCTYPE html>
<html>
<head>
<title>jQuery .append() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">
<p>이것은 기존 내용입니다.</p>
</div>
<script>
$(document).ready(function(){
$("#myDiv").append("<p>이것은 새로운 내용입니다.</p>");
});
</script>
</body>
</html>
template
$("#test").tmpl().appendTo("#mainBoard");
tmpl() : 제이쿼리 템플릿 엔진
"#mainBoard" 에 "#test" 추가함
사실 html 문법임
"<template>"
HTML 문서에 자바스크립트를 활용하여 동적으로 복제하고
추가할 수 있는 관련 콘텐츠를 탬플릿으로 보관하는 영역을 나타냅니다.
순수 자바스크립트
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>template 태그</title>
</head>
<body>
<h1>template 태그</h1>
<p>렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다.</p>
<template id="list-item-template">
<li class="template-list-item"></li>
</template>
<ul id="template-item-list"></ul>
<button id="add-template-item-btn">아이템 추가하기</button>
<!-- 자바스크립트 코드가 여기에 들어갑니다. -->
<script src="./template.js"></script>
</body>
</html>const itemList = document.getElementById('template-item-list');
const listItemTemplate = document.getElementById('list-item-template');
const addItemBtn = document.getElementById('add-template-item-btn');
const predefinedItems = ['Apple', 'Banana', 'Orange', 'Grapes', 'Peach'];
addItemBtn.addEventListener('click', () => {
const randomIndex = Math.floor(Math.random() * predefinedItems.length);
const selectedText = predefinedItems[randomIndex];
console.log(listItemTemplate.content.cloneNode(true))
const listItemClone = listItemTemplate.content.cloneNode(true);
const listItem = listItemClone.querySelector('.template-list-item');
listItem.textContent = selectedText;
itemList.appendChild(listItemClone);
});
제이쿼리
<!DOCTYPE html>
<html>
<head>
<title>Template 요소 사용 예제</title>
</head>
<body>
<!-- template 요소 정의 -->
<template id="myTemplate">
<p>This is a template content.</p>
</template>
<!-- 버튼을 클릭하면 template 내용을 추가하는 예제 -->
<button id="showTemplate">Show Template</button>
<div id="templateContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 버튼 클릭 시 템플릿 내용을 가져와 복제하여 페이지에 추가
$("#showTemplate").click(function(){
var templateContent = $("#myTemplate").html(); // 템플릿 내용 가져오기
$("#templateContainer").append(templateContent); // 페이지에 추가
});
});
</script>
</body>
</html>
이럴 거면 굳이 template 쓰는 이유를 모르겠음
그냥 div 에 id 쓰면 안되나
에 대한 대답
맞습니다, <template> 요소를 사용하지 않고도 동적으로 콘텐츠를 생성하고 표시할 수 있습니다. <template> 요소는 몇 가지 특정한 상황에 유용할 수 있습니다. 여기에 몇 가지 사용 사례를 설명하겠습니다:
- 가독성 및 유지보수성: 템플릿을 <template> 요소로 정의하면 템플릿의 구조가 명확하게 드러나며, 템플릿과 JavaScript 코드 간의 분리를 촉진합니다. 이로 인해 코드가 더 가독성 있고 유지보수가 쉬워집니다.
- 렌더링 지연: <template> 요소의 내용은 페이지 로드 시에 렌더링되지 않기 때문에 초기 로딩 시에 콘텐츠를 로드하지 않아도 됩니다. 이것은 초기 페이지 로딩 성능을 향상시킬 수 있습니다.
- 복제 및 재사용: <template> 요소의 내용을 JavaScript로 복제하여 동적으로 여러 번 사용할 수 있습니다. 이는 동일한 형식의 콘텐츠를 여러 번 생성해야 하는 경우에 유용합니다.
- 서버에서 데이터와 템플릿을 분리: 서버에서 데이터를 가져오고 클라이언트에서 이 데이터를 템플릿과 결합하여 표시할 때 <template> 요소를 사용하면 데이터와 템플릿을 분리할 수 있습니다.
그러나 <template> 요소를 사용하지 않고도 동적 콘텐츠를 생성할 수 있으며, 이를 위해 <div> 또는 다른 HTML 요소를 사용하는 것도 가능합니다. 선택은 개발자의 필요에 따라 다를 수 있으며, 특정 상황에 적합한 방법을 선택하는 것이 중요합니다.
728x90
반응형
댓글