Update Element Content and Attributes

function updateElement(selector, newTextContent, newHTMLContent = '', attributes = {}) {
    const element = document.querySelector(selector);
    if (!element) {
        console.error('Element not found:', selector);
        return;
    }

    if (newTextContent !== null) {
        element.textContent = newTextContent;
    }

    if (newHTMLContent) {
        element.innerHTML = newHTMLContent;
    }

    for (const key in attributes) {
        if (key === 'class') {
            element.className = attributes[key]; // Directly set class string
        } else if (key === 'addClass') {
            element.classList.add(...attributes[key].split(' ')); // Add multiple classes
        } else if (key === 'removeClass') {
            element.classList.remove(...attributes[key].split(' ')); // Remove multiple classes
        } else if (key === 'toggleDataAttribute') {
            const dataKey = attributes[key];
            if (element.dataset[dataKey]) {
                delete element.dataset[dataKey];
            } else {
                element.dataset[dataKey] = 'true';
            }
        } else if (key.startsWith('data-')) {
            element.setAttribute(key, attributes[key]); // Set data-attributes
        } else {
            element.setAttribute(key, attributes[key]); // Set other attributes
        }
    }
}

// Usage example:
// <p id="myParagraph" data-status="pending" class="message"></p>

updateElement('#myParagraph', 'Content updated!', null, {
    addClass: 'success important',
    removeClass: 'message',
    'data-status': 'completed',
    style: 'color: green;',
    title: 'Updated paragraph'
});

// Update with inner HTML
updateElement('#myParagraph', null, '<strong>HTML</strong> content updated!', {
    'data-count': '10'
});

// Toggle a data attribute
updateElement('#myParagraph', null, null, {
    toggleDataAttribute: 'expanded'
});