DOM Manipulation in JavaScript

// Selecting elements
document.getElementById('myId');                 // single Element or null
document.getElementsByClassName('myClass');       // live HTMLCollection
document.getElementsByTagName('li');              // live HTMLCollection
document.querySelector('.myClass');               // first match, static
document.querySelectorAll('.myClass');            // static NodeList of all matches

// Modifying content/attributes
el.textContent = 'New text';
el.innerHTML = '<strong>Bold</strong>';
el.setAttribute('data-id', '42');
el.classList.add('active');
el.style.color = 'red';

// Creating and inserting
const li = document.createElement('li');
li.textContent = 'New item';
parentUl.appendChild(li);
parentUl.insertBefore(li, parentUl.firstChild);

// Removing
li.remove();
parentUl.removeChild(li);

<ul id="list">
  <li class="item">Apples</li>
  <li class="item">Bananas</li>
</ul>

const liveItems = document.getElementsByClassName('item'); // live HTMLCollection
const staticItems = document.querySelectorAll('.item');     // static NodeList

console.log(liveItems.length);   // 2
console.log(staticItems.length); // 2

const ul = document.getElementById('list');
const newLi = document.createElement('li');
newLi.className = 'item';
newLi.textContent = 'Cherries';
ul.appendChild(newLi);

console.log(liveItems.length);   // updates automatically
console.log(staticItems.length); // does NOT update -- stale snapshot

Console output:
2   // liveItems.length before appendChild
2   // staticItems.length before appendChild
3   // liveItems.length AFTER appendChild (auto-updated, live collection)
2   // staticItems.length AFTER appendChild (unchanged, static snapshot)

Resulting DOM:
<ul id="list">
  <li class="item">Apples</li>
  <li class="item">Bananas</li>
  <li class="item">Cherries</li>
</ul>