Deep Cloning an Existing DOM Element for Reuse

function cloneElementDeeply(originalElement, appendToParent = null) {
  // `cloneNode(true)` performs a deep clone, including all descendants.
  // `cloneNode(false)` would only clone the element itself, not its children.
  const clonedElement = originalElement.cloneNode(true);

  // Optional: Modify attributes of the cloned element to avoid ID conflicts
  // and mark it as a clone.
  if (clonedElement.id) {
    clonedElement.id = `${clonedElement.id}-clone-${Date.now()}`;
  }
  clonedElement.classList.add('cloned-item');

  // Important: Event listeners attached via addEventListener() are NOT cloned.
  // You will need to reattach them manually if required.
  // For example:
  // clonedElement.querySelector('.my-button')?.addEventListener('click', handleCloneClick);

  if (appendToParent) {
    appendToParent.appendChild(clonedElement);
  }
  return clonedElement;
}

// --- Example Usage ---
// Assume an HTML structure like:
// <div id="templateItem" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 5px;">
//   <h2>Original Item</h2>
//   <p>This is some content.</p>
//   <button class="action-button">Click Me</button>
// </div>
// <div id="clonedContainer"></div>

const templateItem = document.getElementById('templateItem');
const clonedContainer = document.getElementById('clonedContainer');

if (templateItem && clonedContainer) {
  // Clone and append multiple times
  for (let i = 0; i < 3; i++) {
    const newClone = cloneElementDeeply(templateItem, clonedContainer);
    newClone.querySelector('h2').textContent = `Cloned Item ${i + 1}`;
    newClone.querySelector('.action-button').addEventListener('click', () => {
      alert(`Button clicked on Cloned Item ${i + 1}`);
    });
  }
  console.log('Cloned elements added to container.');
} else {
  console.error('Template item or cloned container not found.');
}