Quiero cambiar el .container innerHTML tiempo real a través de setAttribute('data-content', 'value changed'); . Actualmente, estoy agregando HTML interno a través de innerHTML .container.innerHTML = .container.getAttribute('data-content');
const container = document.querySelector('.container'); container.innerHTML = container.getAttribute('data-content'); const btn = document.querySelector('.btn'); // before clicking on button console.log(container.getAttribute('data-content')); btn.addEventListener('click', (e) => { container.setAttribute('data-content', 'Value Changed!!'); console.log(container.getAttribute('data-content')); }); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: flex; padding-top: 1rem; align-items: flex-start; justify-content: center; } .btn { cursor: pointer; margin-left: 1rem; padding: 0.25rem 0.5rem; } <div class="container" data-content="Hello, World!"></div> <button class="btn">Change Attribute Value</button>Es exactamente como dijeron las personas en los comentarios: podría crear este enlace usando algún tipo de "marco JS", donde definiría el enlace entre el atributo y el "valor HTML/valor de texto de la etiqueta <div> ".
Pero en JS/html simple, debe establecer este valor manualmente.
const container = document.querySelector('.container'); container.innerHTML = container.getAttribute('data-content'); const btn = document.querySelector('.btn'); // before clicking on button console.log(container.getAttribute('data-content')); btn.addEventListener('click', (e) => { container.setAttribute('data-content', 'Value Changed!!'); console.log(container.getAttribute('data-content')); // Added line container.innerHTML = container.getAttribute('data-content'); }); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; } .btn { cursor: pointer; padding: 0.25rem 0.5rem; } <div class="container" data-content="Hello, World!"></div> <button class="btn">Change Attribute Value</button>Puede usar la funciónattr en CSS para pseudo elemento
const container = document.querySelector('.container'); const btn = document.querySelector('.btn'); // before clicking on button console.log(container.getAttribute('data-content')); btn.addEventListener('click', (e) => { container.setAttribute('data-content', 'Value Changed!!'); console.log(container.getAttribute('data-content')); }); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; } .btn { cursor: pointer; padding: 0.25rem 0.5rem; } .container::before{ content: attr(data-content); } <div class="container" data-content="Hello, World!"></div> <button class="btn">Change Attribute Value</button>