HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<head>
  <style>
    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      margin: 10px;
      width: 200px;
    }
    .card h3 {
      margin: 0;
    }
  </style>
</head>
<body>
  <div id="template-container">
    
    <template id="card-template">
      <div class="card">
        <h3 id="card-title">Title</h3>
        <p id="card-content">Content goes here...</p>
      </div>
    </template>
  </div>

// Function to create and insert cards
    function createCards(data) {
      const template = document.getElementById('card-template');

data.forEach(item => {
        const clone = document.importNode(template.content, true);

// Customize the cloned content
        clone.querySelector('#card-title').textContent = item.title;
        clone.querySelector('#card-content').textContent = item.content;

// Insert the cloned content into the DOM
        document.getElementById('card-container').appendChild(clone);
      });
    }

// Create cards with the provided data
    createCards(cardData);
  </script>
</body>