Output

JavaScript has no print. Showing something means choosing where it should go: the console for you, the page for the reader.

console.log, for you

The console is the developer tools panel, not part of the page. Nothing a visitor sees comes from it, which makes it the right tool while you are working.

const price = 12.5;
const quantity = 3;

console.log('total', price * quantity);
console.log({ price, quantity });

total 37.5
{price: 12.5, quantity: 3}

It takes any number of arguments and shows objects and arrays as structures you can expand, which beats stitching strings together. console.warn and console.error are the same idea with a colour and, for errors, a stack trace.

textContent, for the page

To change what a reader sees, find the element and set its text. Run this one and watch the heading above the console change:

<h1 id="title">Original</h1>

const heading = document.getElementById('title');

heading.textContent = 'Updated';

The heading reads "Updated".

textContent treats what you give it as text, always. Angle brackets stay angle brackets, and nothing in the string can turn into markup.

innerHTML, and the catch

innerHTML parses the string as HTML, so you can build structure with it:

<div id="box">empty</div>

const box = document.getElementById('box');

box.innerHTML = '<strong>Saved</strong> just now';

Saved just now, with "Saved" in bold.

Try it. Change textContent to innerHTML in this example and run it again:

<p id="out"></p>

// Pretend this came from a form field.
const typed = '<img src=x onerror=console.error(1)>';

document.getElementById('out').textContent = typed;

The markup appears as text, exactly as typed.
With innerHTML it runs instead.

alert, rarely

alert shows a modal box and freezes everything until it is dismissed. It is occasionally useful for a quick check, and almost never right in a finished page.

alert('Saved');

A modal dialog appears. The page stops until it is closed.

confirm and prompt are its siblings, returning a boolean and a string. All three are styled by the browser rather than by you, which is why real interfaces build their own.

document.write, never

You will find document.write in old tutorials. Called after the page has loaded it wipes the entire document and starts a new one, which is almost never what anybody wanted.

// Do not do this.
document.write('Hello');

Before load: inserts text.
After load: erases the whole page first.

There is no situation where it is the best tool. Use textContent or innerHTML on a specific element instead.

Which to use