How to update an element's HTML in JavaScript using getElementById and innerHTML.

What is the correct JavaScript syntax to change an element's HTML?

• A. document.getElementById("demo").setHTML("Hello World!");
• B. document.setElementById("demo").innerHTML = "Hello World!";
• C. document.getElement("demo").innerHTML = "Hello World!";
• D. document.getElementById("demo").innerHTML = "Hello World!";

Answer: (D)

The syntax that changes an element's HTML correctly utilizes the `getElementById` method, which is a standard way in JavaScript to select an HTML element by its unique ID. The method `document.getElementById("demo")` retrieves the element with the ID of "demo" in the document. Once this element is selected, the property `innerHTML` can be set to a new value, in this case, the string "Hello World!". The `innerHTML` property is commonly used to get or set the HTML content inside an element, making it an appropriate choice for modifying the inner content of an element. Other options demonstrate incorrect approaches or syntax. They either misuse the method for element selection or employ nonexistent properties and methods, which clarifies why the correct syntax of option D stands out as the only accurate choice.

JavaScript and the little tricks that make web pages feel alive are often learned in tiny, bite-sized moments like this one. You see a line of code, you test it in the browser, and suddenly the page responds the way you want. Let’s walk through a simple, real-world example that nails down how to change what an element shows on the page.

Which option actually changes an element’s HTML?

• A. document.getElementById("demo").setHTML("Hello World!");

• B. document.setElementById("demo").innerHTML = "Hello World!";

• C. document.getElement("demo").innerHTML = "Hello World!";

• D. document.getElementById("demo").innerHTML = "Hello World!";

If you’ve worked with the DOM (that’s the document’s structure you see in HTML), you might recognize a few names here: getElementById, innerHTML, and the general idea of grabbing an element by its ID and changing what it contains. The correct answer is D. It uses the standard pattern: grab the element by its unique ID and then set its innerHTML to a new string.

Here’s the thing about the DOM and these methods

Think of the web page as a living document. Elements have IDs so you can grab them quickly, almost like picking a specific mug from a shelf by labeling it. The getElementById method is the fastest, most straightforward way to land on that one mug you want to polish. Once you’ve got the element, you can change its content in a couple of ways. innerHTML is a popular choice when you want to insert or replace what’s inside the element, including HTML tags, not just plain text.

Now, what about the others? Why aren’t they right for this task?

• A tries to call setHTML on the element, but there’s no standard setHTML method in JavaScript. It’s easy to imagine a magical function that does “setHTML,” but in the real world, the DOM has a clean, well-defined set of methods and properties—and setHTML isn’t one of them.

• B misuses the pattern altogether. There’s no document.setElementById method. The document object is the gateway to your page, and you must call getElementById on it to fetch the element. Then you can work with the element you retrieved.

• C uses document.getElement, which sounds plausible if you mix up the naming you see in other libraries, but in vanilla JavaScript there’s no getElement function by that name. The classic, reliable pick is getElementById.

Inside the element: what innerHTML actually does

Setting innerHTML is a powerful move. It doesn’t just put text inside the tag; it replaces all the content inside with the new HTML you provide. If you pass "Hello World!", you’ll get bold text. If you pass "<span>Hi</span>", you get a wrapped piece of content with that exact HTML structure inside the element.

That flexibility makes innerHTML incredibly useful for dynamic pages. You can build small UI components on the fly, swap out messages in response to user actions, or display data from an API with a little string interpolation.

A quick contrast: innerHTML vs textContent

If your goal is to show plain text and you don’t want any HTML to be interpreted, textContent is your friend. It places the raw text into the element, escaping any tags you might have included. So if you do:

document.getElementById("demo").textContent = "Hello World!";

the user will see the literal angle brackets and words, not bolded text. It’s safer when you’re inserting user-generated content and you want to avoid any unintended HTML execution.

A word on safety: innerHTML can be a double-edged sword

Because innerHTML interprets HTML, it’s powerful—but with great power comes great responsibility. If you’re injecting content that could be supplied by users or external sources, you run the risk of cross-site scripting (XSS) attacks. The quick rule of thumb: sanitize user input or use textContent when HTML isn’t needed. If you must insert HTML from external sources, lean on a trusted sanitizer library or create your own safe, minimal HTML-building routine.

A tiny hands-on example

Let’s see a straightforward example you can try in your own environment. Suppose you have an HTML snippet like this:

Now, in JavaScript you can rewrite the content like this:

document.getElementById("demo").innerHTML = "Hello World!";

Open your browser's console and paste that line after the page loads, and you’ll notice the word Hello World in bold inside that div.

If you want to show plain text instead, you could do:

document.getElementById("demo").textContent = "Hello World!";

And if you want to demonstrate the contrast, you could even mix them:

document.getElementById("demo").innerHTML = "Hello World!";

document.getElementById("demo").textContent = "Hello World!";

That little side-by-side makes it crystal clear how innerHTML handles tags differently from textContent.

Where this fits into the broader toolbox

Knowing how to grab an element by ID is a foundation. It opens doors to lots of other selection strategies:

• querySelector and querySelectorAll: more flexible selectors, not limited to a single ID.

• getElementsByClassName and getElementsByTagName: pace yourself with collections (these return lists of elements, not a single one).

• The difference between properties you set (like innerHTML) and methods you call (like addEventListener to respond to user actions).

As you explore, you’ll find that combining these moves lets you create small, interactive snippets that feel polished. And hey, that’s what makes front-end work fun: tiny scripts turning a static page into something you can actually interact with.

A few practical tips as you code

• Keep the HTML structure clear. If you’re frequently touching the same element, give it a distinct ID and keep the script that updates it nearby so you don’t lose track.

• Start with textContent if you’re displaying user input. It protects you by default, and you can switch to innerHTML when you truly need to render HTML.

• Test in the browser. The console is your best friend here. Try selecting elements, inspecting properties, and watching how the DOM changes in real time.

• Read, don’t memorize. The names get you there: getElementById, innerHTML, textContent—these aren’t random words. They describe exactly what they do, and a quick read on each can save you a lot of confusion later.

Bringing it back to the bigger picture

If you’re navigating the learning path that many students encounter when tackling Revature’s assessments, this kind of DOM knowledge is a reliable compass. It’s not about memorizing a single line of code; it’s about understanding how web pages are built and how to influence what the user sees. A small script like the one we walked through can become part of a larger pattern: respond to a user event, fetch data, render the result, polish the presentation with a touch of HTML, and do it in a way that’s safe and maintainable.

A quick mental map to keep in your pocket

• Identify the element you want to change with getElementById, querySelector, or similar selectors.

• Decide what you want to show: plain text (textContent) or HTML (innerHTML).

• Apply the content carefully, keeping security in mind when dealing with external input.

• Experiment, observe, and adjust. The best code is born from curiosity and small, deliberate experiments.

If you’re exploring JavaScript with real curiosity, you’ll notice a common pattern: simple commands can have big effects. The trick is to keep your concepts tight—IDs, the DOM, innerHTML—and then connect those dots to your everyday projects. The more you practice, the more fluent you’ll become in making pages that respond the moment someone clicks a button or hovers over a title.

A nod to everyday tools you already know

• Chrome DevTools: use the Elements panel to inspect the DOM and test changes live.

• MDN Web Docs: a friendly place to read up on getElementById, innerHTML, and related properties.

• Small, incremental experiments: try swapping content, then add a bit of styling, then wire up a simple event to trigger the change.

In short, the right line—document.getElementById("demo").innerHTML = "Hello World!"—is a clean, dependable recipe for updating a page’s content. It’s one of those fundamentals that quietly powers nicer, more interactive interfaces. And once you’re comfortable with this pattern, you’ll recognize how it fits into a broader toolkit that makes modern web development feel intuitive rather than mysterious.

So next time you’re browsing through a sample snippet, remember: grab the element with getElementById, and then set its inside with innerHTML when you need to render something that deserves HTML. If you’re curious to go deeper, try swapping innerHTML for textContent and see how the page’s heart changes. That little experiment is more than a trick—it’s a doorway to understanding how websites come alive, one line at a time.