innerHTML vs textContent?

textContent escapes and is safer for user data; innerHTML parses HTML.

NodeList live vs static?

querySelectorAll returns static; getElementsByClassName is live.

Batch many inserts with one reflow. Append fragment once.

Read and update text safely.

Demo

Hello DOM

Avoid innerHTML when plain text is enough.

const el = document.querySelector('.title');
el.textContent = 'New heading';

Add/remove classes without className strings.

Toggle

Box

Toggles highlight class.

el.classList.add('active');
el.classList.toggle('open');
el.classList.remove('hidden');

Build list items dynamically.

Add item

Appends a new list item.

const li = document.createElement('li');
li.textContent = 'Item';
list.appendChild(li);

innerHTML vs textContent?: textContent escapes and is safer for user data; innerHTML parses HTML.
NodeList live vs static?: querySelectorAll returns static; getElementsByClassName is live.
When to use DocumentFragment?: Batch many inserts with one reflow. Append fragment once.