Events in JS Part II: Listeners and Manipulation

With an understanding of how events are triggered via the Web API, a quick example of basic DOM manipulation can help bring it all together. Below is one very basic process that a little store might set up in a cart system.

↓ Examples ↓
function handleEvent() {
 document.getElementById('button1').addEventListener('click', buttonClickHandler);
 function buttonClickHandler() {
   alert('Click Event');
  }
}
window.addEventListener('load',handleEvent );

//	.removeChild(child)
function removeHandler() {
  const parent = document.getElementById('div1');
  const child = document.getElementById('p2');
  parent.removeChild(child);
}

This is the first node

This is the second node

function createHandler() {
  const parent = document.getElementById('div2');
  const child = document.createElement('p');
  const text = document.createTextNode('I am new here!');
  child.appendChild(text);
  parent.appendChild(child);
                        
}

// Second example of the above
function prodRemoveHandler() {
 const parent = document.getElementById('product-detail-wrap');
 const child = document.getElementById('item2');
 parent.removeChild(child)
}
                        
function prodCreateHandler1() {
 const parent = document.getElementById('product-detail-wrap');
 const child = document.createElement('p');
 const text = 'TV $2400';
 child.innerHTML = text;
 parent.appendChild(child);
}
                        
function prodCreateHandler2() {
  const parent = document.getElementById('product-detail-wrap');
  const child = document.createElement('p');
  const text = 'Stereo $900';
  child.innerHTML = text;
  parent.appendChild(child);
}