Replace One DOM Element with Another

function replaceElement(oldElementId, newElement) {
    const oldElement = document.getElementById(oldElementId);
    if (!oldElement) {
        console.error(`Element with ID '${oldElementId}' not found.`);
        return false;
    }
    if (!(newElement instanceof Element)) {
         console.error('The new element must be a valid DOM element.');
         return false;
    }

    try {
        oldElement.replaceWith(newElement);
        return true;
    } catch (error) {
        console.error('Failed to replace element:', error);
        return false;
    }
}

// Example Usage:
// Assume there's a button in your HTML:
// <button id="myButton">Click Me</button>
const newDiv = document.createElement('div');
newDiv.textContent = 'Button replaced by a div!';
newDiv.style.backgroundColor = '#f0f0f0';
newDiv.style.padding = '10px';
newDiv.id = 'replacementDiv';

replaceElement('myButton', newDiv);

// Another example: replace the newly inserted div with a new button
const anotherButton = document.createElement('button');
anotherButton.textContent = 'New Action';
anotherButton.id = 'newActionButton';
anotherButton.onclick = () => alert('New button clicked!');
// Assume there is an element with ID 'replacementDiv' now
replaceElement('replacementDiv', anotherButton);