Back to Exercises
Modify Text and HTML
This text will change.
const el = document.getElementById('demoText');
el.textContent = 'New text';
el.innerHTML = 'Bold text';
Modify Styles
Style me!
const styled = document.getElementById('styled');
styled.style.color = 'red';
styled.style.fontSize = '24px';
Modify Attributes
const link = document.getElementById('demoLink');
link.setAttribute('href', 'https://developer.mozilla.org');
link.removeAttribute('target');
Full Code Used in This Demo
HTML
<p id="demoText">This text will change.</p>
<p id="styled">Style me!</p>
<a id="demoLink" href="https://example.com" target="_blank">Go to example.com</a>
CSS
.btn { background: #3b82f6; color: #fff; border-radius: 8px; }
JavaScript
function setText() {
const el = document.getElementById('demoText');
el.textContent = 'New text via textContent';
}
function setHtml() {
const el = document.getElementById('demoText');
el.innerHTML = 'Bold text via innerHTML';
}