템플릿 태그

    
      <template>
        <!-- 템플릿 내용 -->
      </template>
    
  

    
      <button id="addButton">Add Item</button>
      <ul id="itemList"></ul>
      <template id="itemTemplate">
        <li class="item">This is a new item</li>
      </template>
    
  

    
// DOM에서 사용할 요소에 대한 참조 얻기
const addButton = document.getElementById('addButton'); // "추가" 버튼
const itemList = document.getElementById('itemList'); // 항목을 추가할 리스트
const itemTemplate = document.getElementById('itemTemplate'); // 리스트 항목의 템플릿

// "추가" 버튼에 이벤트 핸들러 추가하기
addButton.addEventListener('click', () => {
  // 리스트 항목 템플릿 내용 복제하기
  const newItem = itemTemplate.content.cloneNode(true); // true는 모든 자식 요소를 포함한 깊은 복제를 의미해

  // 새로운 항목을 리스트에 추가하기
  itemList.appendChild(newItem); 
});
    
  

    
      <h1>상품 목록</h1>
      <div id="productList"></div>
      <template id="productTemplate">
        <div class="item">
          <h2 class="title"></h2>
          <p class="description"></p>
          <span class="price"></span>
        </div>
      </template>
    
  

    
// 스크립트 실행 전에 DOM이 완전히 로드되기를 기다림
document.addEventListener('DOMContentLoaded', () => {
  // 상품에 대한 데이터 배열
  const products = [
    { title: '상품 1', description: '상품 1 설명', price: '100 달러' },
    { title: '상품 2', description: '상품 2 설명', price: '200 달러' },
    { title: '상품 3', description: '상품 3 설명', price: '300 달러' },
  ];

  // DOM 요소에 대한 참조 얻기
  const productList = document.getElementById('productList'); // 제품 리스트 컨테이너
  const template = document.getElementById('productTemplate').content; // 제품 요소 템플릿

  // 제품 배열을 반복하며 각각의 요소를 리스트에 생성
  products.forEach(product => {
    // 제품 템플릿 복제하기
    const clone = document.importNode(template, true); // true - 깊은 복제

    // 복제된 템플릿에 데이터를 입력하기
    clone.querySelector('.title').textContent = product.title;
    clone.querySelector('.description').textContent = product.description;
    clone.querySelector('.price').textContent = product.price;

    // 리스트에 채워진 템플릿 추가하기
    productList.appendChild(clone);
  });
});
    
  

    
      <h1>작업 결과</h1>
      <div id="messageContainer"></div>

      <template id="messageTemplate">
        <div class="message">
          <p class="content"></p>
        </div>
      </template>
    
  

    
document.addEventListener('DOMContentLoaded', () => {
  // DOM 요소에 대한 참조 얻기
  const messageContainer = document.getElementById('messageContainer'); // 메시지 컨테이너
  const template = document.getElementById('messageTemplate').content; // 메시지 템플릿

  // 메시지를 표시하기 위한 함수
  function showMessage(type, text) {
    // 메시지 템플릿 복제하기
    const clone = document.importNode(template, true); // true - 깊은 복제

    // 복제본 내부의 메시지 요소에 대한 참조 얻기
    const messageDiv = clone.querySelector('.message');

    // 메시지 유형에 해당하는 클래스 추가하기 (success 또는 error)
    messageDiv.classList.add(type);

    // 메시지 텍스트 설정하기
    messageDiv.querySelector('.content').textContent = text;

    // 메시지를 컨테이너에 추가하기
    messageContainer.appendChild(clone);
  }

  // 메시지를 표시하기 위해 함수 호출하기
  showMessage('success', '작업이 성공적으로 완료되었습니다!');
  showMessage('error', '작업 중 오류가 발생했습니다.');
});