Clone and Customize Existing DOM Elements

function cloneAndCustomizeElement(originalElementId, targetParentId, modifications = {}) {
  const originalElement = document.getElementById(originalElementId);
  const targetParent = document.getElementById(targetParentId);

  if (!originalElement) {
    console.error('Original element not found:', originalElementId);
    return null;
  }
  if (!targetParent) {
    console.error('Target parent element not found:', targetParentId);
    return null;
  }

  // Clone the original element deeply (true means clone all children too)
  const clonedElement = originalElement.cloneNode(true);

  // Apply modifications
  if (modifications.id) {
    clonedElement.id = modifications.id;
  } else {
    // Ensure cloned element has a unique ID if original had one
    clonedElement.removeAttribute('id');
  }

  if (modifications.textContent) {
    clonedElement.textContent = modifications.textContent;
  }
  if (modifications.innerHTML) {
    clonedElement.innerHTML = modifications.innerHTML;
  }
  if (modifications.className) {
    clonedElement.className = modifications.className;
  }
  if (modifications.attributes) {
    for (const attrName in modifications.attributes) {
      clonedElement.setAttribute(attrName, modifications.attributes[attrName]);
    }
  }

  // Append the customized clone to the target parent
  targetParent.appendChild(clonedElement);
  console.log(`Cloned #${originalElementId} and appended to #${targetParentId}`);
  return clonedElement;
}

// Example Usage:
// HTML:
// <div id="templateCard" style="border: 1px solid #ccc; padding: 10px; margin-bottom: 5px;">
//   <h3>Original Card Title</h3>
//   <p class="description">This is the description for the original card.</p>
//   <button data-action="view">View Details</button>
// </div>
// <div id="containerForClones"></div>

// Clone and customize with new ID and text
// const newCard1 = cloneAndCustomizeElement('templateCard', 'containerForClones', {
//   id: 'productCard_1',
//   innerHTML: '<h3>Product 1</h3><p class="description">Details for product one.</p><button data-action="buy">Buy Now</button>'
// });

// Clone again with different content
// const newCard2 = cloneAndCustomizeElement('templateCard', 'containerForClones', {
//   id: 'productCard_2',
//   textContent: 'Another Product Card (all text removed except this)', // Overwrites all inner HTML
//   attributes: {
//     'data-product-id': 'xyz789'
//   }
// });