Once you've got an element, you can change what's inside it.
textContent
textContent reads or changes the text inside an element:
const title = document.querySelector("#title");
console.log(title.textContent); // "Welcome to the DOM!"
title.textContent = "I changed this with JavaScript! 🎉";Refresh the page and watch the heading change. You just controlled a web page. Take a moment. Do a little dance. Professor Curly is dancing too.
innerHTML
innerHTML reads or changes the HTML inside an element. That means you can include tags, and the browser will turn them into real elements:
const container = document.querySelector("#container");
container.innerHTML = "<h2>Breaking news!</h2><p>JavaScript is <strong>awesome</strong>.</p>";If you used textContent here instead, you'd see the literal text <h2>Breaking news!</h2>... on the page, with all the angle brackets showing, because textContent treats everything as plain text.
Never put text typed by a user into innerHTML. If a sneaky user types something like <img src=x onerror="stealYourPassword()"> into a comment box, and you put it on the page with innerHTML, the browser will treat it as real HTML and run their code. This kind of attack is called cross-site scripting (XSS), and it's one of the most common security holes on the web.
The safe rule: use textContent for anything that came from a user. textContent never runs anything; it just shows the text exactly as typed. Only use innerHTML for HTML that you wrote yourself.