如何通过属性实时修改元素的innerHTML或innerText？——基于data-content属性的实时更新需求

The issue here is that you’re only syncing the data-content value to innerHTML once on page load. Changing the attribute later doesn’t automatically update the element’s content—you need to explicitly handle that sync, or set up a listener to do it for you.

Solution 1: Manual Sync (Simplest Approach) #

The easiest fix is to update innerHTML right after you modify the data-content attribute. This works perfectly if you only need to sync the value in this specific button click handler:

const container = document.querySelector('.container');
const btn = document.querySelector('.btn');

// Initialize content on page load
container.innerHTML = container.getAttribute('data-content');

// Log initial attribute value
console.log(container.getAttribute('data-content'));

btn.addEventListener('click', (e) => {
    const newContent = 'Value Changed!!';
    container.setAttribute('data-content', newContent);
    // Sync innerHTML with the updated attribute value
    container.innerHTML = container.getAttribute('data-content');
    // Alternatively, use the newContent variable directly for efficiency
    // container.innerHTML = newContent;
    console.log(container.getAttribute('data-content'));
});

Solution 2: MutationObserver (Automatic Sync for All Attribute Changes) #

If you need the innerHTML to stay in sync with data-content even when the attribute is modified elsewhere (not just this button), use a MutationObserver to watch for attribute changes automatically:

const container = document.querySelector('.container');
const btn = document.querySelector('.btn');

// Initialize content on page load
container.innerHTML = container.getAttribute('data-content');

// Set up observer to monitor changes to the data-content attribute
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.attributeName === 'data-content') {
            container.innerHTML = container.getAttribute('data-content');
        }
    });
});

// Start observing attribute changes on the container
observer.observe(container, { attributes: true });

// Log initial attribute value
console.log(container.getAttribute('data-content'));

btn.addEventListener('click', (e) => {
    container.setAttribute('data-content', 'Value Changed!!');
    console.log(container.getAttribute('data-content'));
});

Why Your Original Code Didn’t Work #

When you run container.innerHTML = container.getAttribute('data-content') on page load, you’re copying the attribute’s value into the element’s content. After that, the data-content attribute and innerHTML are completely separate values—changing one won’t affect the other unless you explicitly link them.

Your existing CSS and HTML can remain unchanged for both solutions.

内容的提问来源于stack exchange，提问作者Kunal Tanwar