Clone an Existing DOM Element with or without Children

function cloneElement(originalElementId, deepClone = true, targetParentId = null) {
    const originalElement = document.getElementById(originalElementId);
    if (!originalElement) {
        console.error(`Original element with ID '${originalElementId}' not found.`);
        return null;
    }

    const clonedElement = originalElement.cloneNode(deepClone);

    if (targetParentId) {
        const targetParent = document.getElementById(targetParentId);
        if (targetParent) {
            targetParent.appendChild(clonedElement);
        } else {
            console.warn(`Target parent with ID '${targetParentId}' not found. Cloned element not appended.`);
        }
    }
    
    // Optional: Modify ID to prevent duplicates if appending to the same document
    // and the original had an ID (IDs must be unique)
    if (clonedElement.id) {
        clonedElement.id = `${clonedElement.id}-cloned-${Date.now()}`;
    }

    return clonedElement;
}

// Example Usage:
// Assume the following HTML structure:
// <div id="template-card">
//     <h3>Item Title</h3>
//     <p>Description goes here.</p>
// </div>
// <div id="card-container"></div>
const card1 = cloneElement('template-card', true, 'card-container'); // Deep clone
if (card1) {
    card1.querySelector('h3').textContent = 'Product A';
    card1.querySelector('p').textContent = 'Detail for product A.';
}

const card2 = cloneElement('template-card', false, 'card-container'); // Shallow clone (only template-card div, no h3 or p)
if (card2) {
    card2.textContent = 'This is a shallow clone.';
}