Create Element

document.createElement() creates an element – without adding to the DOM.

addItemBtn.addEventListener('click', () => { 
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
});

Append Element Child

Node.appendChild() selects an existing node, then appends or adds a new node as a child. Nodes belong to the DOM, while elements are plain HTML.

addItemBtn.addEventListener('click', () => { 
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
});

Example of a function that creates and attaches buttons to a passed li element

function attachListItemButtons(li) {
  let up = document.createElement('button');
  up.className = 'up'; 
  up.textContent = 'Up'; 
  li.appendChild(up);

  let down = document.createElement('button');
  down.className = 'down'; 
  down.textContent = 'Down'; 
  li.appendChild(down);
  
  let remove = document.createElement('button');
  remove.className = 'remove'; 
  remove.textContent = 'Remove'
  li.appendChild(remove);
}

Remove Element Child

Node.removeChild() removes an existing node, then appends or adds a new node as a child. Nodes belong to the DOM, while elements are plain HTML.

removeItemBtn.addEventListener('click', () => { 
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.querySelector('li:last-child');
  ul.removeChild(li);
});