7_DOM_manipulation.md

DOM Manipulation

Now that we've learned more JavaScript, we can expand on DOM manipulation.

Adding and removing elements to the DOM

We've already inserted simple elements in the DOM using the getElementById method and the innerHTML property.

<iframe height="297" style="width: 100%;" scrolling="no" title="wk11 - inserting_1v2" src="https://codepen.io/maujac/embed/jOydjrP?height=297&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen wk11 - inserting_1v2 by Mauricio Buschinelli (@maujac) on CodePen. </iframe>

!> Manually constructing HTML elements from strings of code can easily lead to typos and missed syntax.

Use the methods below to construct, modify and insert DOM elements using JavaScript:

Method	Description
document.createElement(tagName)	Creates an HTML element
parentNode.appendChild(newChild)	Adds an HTML element
parentNode.replaceChild(newChild, oldChild)	Replaces an HTML element
parentNode.insertBefore(newChild,referenceChild)	Inserts a node before a reference node as a child of a specified parent node.
parentNode.removeChild(child)	Removes an HTML element
element.remove()	removes the specified element from the DOM.

New element recipe 👨‍🍳

In order to add new elements to the DOM using the methods listed above, follow these steps:

1. Create a new element and store it in a variable with createElement

   let newDiv = document.createElement("div"); 

   
   

2. Add text to the new node (if desired)

   1. Add the text content to the new element with innerHTML

   newDiv.innerHTML = 'A brand new div';

   
   

3. Get a reference the node to receive the new element as its last child. To position the new node amongst other siblings, a reference to a sibling is also necessary.

   
   

4. Append the new node to the selected reference element with:

   1. appendChild if the new content should go as the last child

      // Option 1: add as the last child of existingDiv
      
      let existingDiv = document.getElementById("tips");
      existingDiv.appendChild(newDiv);

   2. Alternatively, select a middle sibling node and use insertBefore to insert in the middle of the parent

      // Option 2: add between siblings.
      
      let existingDiv = document.getElementById('tips');
      const heroSection = document.getElementById('hero');
      heroSection.insertAfter(newDiv, existingDiv)

<iframe height="330" style="width: 100%;" scrolling="no" title="wk11 - creating_elements -ex8" src="https://codepen.io/maujac/embed/abvwjBX?height=330&theme-id=dark&default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen wk11 - creating_elements -ex8 by Mauricio Buschinelli (@maujac) on CodePen. </iframe>

Hands-on

Lab 3 - Event Delegation

In the event delegation section of the notes you were shown a similar code snip.

However, the buttons lacked implementation and only outputted a string to the console.

Implement the functionality of all 2 buttons using the event delegation pattern:

• Add item should add a new Item at the bottom of the <ul> with the value specified in the <input>
• Remove item should remove the last item in the list.

Do this exercise in your local code editor.

<iframe height="265" style="width: 100%;" scrolling="no" title="wk13 - events exercise - lab 3" src="https://codepen.io/maujac/embed/zYNVwva?height=265&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen wk13 - events exercise - lab 3 by Mauricio Buschinelli (@maujac) on CodePen. </iframe>