Changing the page

An element you have found can be changed: its text, look and attributes, or it can be hidden and shown. The page updates immediately, without reloading — this is exactly how counters, theme switches and error messages work.

Text

To replace an element's text, assign a new value to textContent:

<p id="status">Loading…</p>
 
<script>
  const status = document.querySelector('#status');
 
  status.textContent = 'Done';
</script>

Markup: innerHTML

The innerHTML property holds the HTML code inside an element. If you assign a string with tags to it, the browser turns them into real elements:

<p id="message"></p>
 
<script>
  const message = document.querySelector('#message');
 
  message.innerHTML = 'Your order is <b>placed</b>';
</script>

Use innerHTML only for markup you wrote yourself — the end of the lesson explains why.

Classes

The easiest way to change how an element looks is through classes. The classList property can add a class, remove it and check for it:

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<p id="task">Buy milk</p>
 
<script>
  const task = document.querySelector('#task');
 
  task.classList.add('done');
 
  console.log(task.classList.contains('done')); // true
</script>

The remove() method removes a class, and toggle() adds it if it is missing and removes it if it is there.

Styles

A single CSS property is changed through style. Multi-word names are written without a hyphen, in camelCase: font-weight becomes fontWeight:

<p id="note">Important message</p>
 
<script>
  const note = document.querySelector('#note');
 
  note.style.color = 'crimson';
  note.style.fontWeight = 'bold';
</script>

If there are more than one or two styles, describe them in CSS and toggle a class instead.

Attributes

Standard tag attributes are available as object properties. For any attribute there are the getAttribute() and setAttribute() methods:

<img id="photo" src="cat.jpg" alt="Cat">
 
<script>
  const photo = document.querySelector('#photo');
 
  photo.setAttribute('alt', 'Ginger cat');
  console.log(photo.alt); // Ginger cat
</script>

Your own data is kept in attributes with the data- prefix. From JavaScript they are available through dataset: the data-price attribute is read as element.dataset.price.

Hiding and showing

The hidden property hides an element from the page without removing it. To show the element again, assign false:

<p id="error">Wrong password</p>
 
<script>
  const error = document.querySelector('#error');
 
  error.hidden = true;
  console.log(error.hidden); // true
</script>

Common mistake

Inserting user data with innerHTML. Someone else's code gets onto the page along with it — a vulnerability called XSS. For text, always use textContent: it shows tags as plain text.

<p id="comment"></p>
 
<script>
  const comment = document.querySelector('#comment');
  const userInput = '<img src="x" onerror="alert(1)">';
 
  comment.textContent = userInput;
</script>