BeingXpert Learn & Build Future

3. JavaScript Output

What you will learn

  • Four ways to show output
  • The difference between textContent and innerHTML
  • How to use the browser console for testing
  • Why document.write() is rarely used

Four ways to show output

Method Where it appears Typical use
element.textContent Inside a page element, as plain text Showing text safely
element.innerHTML Inside a page element, as HTML Inserting your own HTML
console.log() The browser’s developer console Testing and debugging
alert() A pop-up box Quick tests only

1. textContent

The most common and safest choice. It puts plain text into an element.

Example

<p id="demo">Before</p>

<script>
  document.getElementById("demo").textContent = "After: shown with textContent";
</script>

Output (after the script runs)

After: shown with textContent

2. innerHTML

innerHTML reads the text as HTML, so tags such as <strong> take effect.

Example

<p id="demo">Before</p>

<script>
  document.getElementById("demo").innerHTML = "This text is <strong>bold</strong>.";
</script>

Output (after the script runs)

This text is bold.

Security warning: never put text typed by a visitor into innerHTML. If it contains HTML or script, the page may run it. This attack is called cross-site scripting (XSS). Use textContent for anything you did not write yourself.

Showing results of calculations

Example

<p id="demo"></p>

<script>
  document.getElementById("demo").textContent = "5 + 6 = " + (5 + 6);
</script>

Output (after the script runs)

5 + 6 = 11

3. console.log()

console.log() writes a message to the browser’s developer console. Visitors never see it, but developers use it constantly to check values.

Syntax

console.log("Hello from the console");
console.log(5 + 6);

To see the messages on your own computer:

  1. Open your page in a browser.
  2. Press F12 (or right-click and choose Inspect).
  3. Click the Console tab.

The console also shows error messages in red, which is the first place to look when something does not work.

The Try it Yourself editor cannot show console messages on this page. To practise console.log(), save a page on your computer and open it with the Console tab visible.

4. alert()

alert() shows a pop-up box that blocks the page until it is closed.

Syntax

alert("Hello!");

Alerts are annoying for visitors, so avoid them on real sites. The Try it Yourself editor blocks pop-up boxes, but the code works in a normal page.

document.write(): know it, but avoid it

document.write() adds text to the page while it loads. If it runs after the page has loaded, it erases the entire page. Modern code uses textContent or innerHTML instead.

Example

<script>
  document.write("Written while the page loads.");
</script>

Output

Written while the page loads.

Common mistakes

  • Looking for console.log() output on the page. It appears in the console.
  • Using innerHTML with text from visitors.
  • Running document.write() after the page has loaded, which wipes the page.
  • Writing .innerText or .textcontent with the wrong capital letters. JavaScript is case sensitive.

Exercise

Use textContent to show 7 x 8 = 56 in the paragraph with the id result. Let JavaScript calculate the 56 (use * for multiply).

Show solution 
<p id="result"></p>

<script>
  document.getElementById("result").textContent = "7 x 8 = " + (7 * 8);
</script>

Knowledge check

1. Which property is the safest way to put text into an element?

textContent

2. Where does console.log() write its output?

In the browser’s developer console (press F12).

3. Why is innerHTML dangerous with visitor input?

It can run HTML or script that the visitor typed (XSS).

Summary

  • Use textContent for text, and innerHTML only for HTML you wrote yourself.
  • console.log() is for developers, and alert() is for quick tests.
  • Avoid document.write() in modern code.
Scroll to Top