テンプレートタグ

    
      <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', '操作中にエラーが発生しました。');
});