DOM Manipulation

Exercise 2

Instructions:

• Remove the third item from the list
• Add new item to the start of the list
• Add new item to the end of the list
• Create a function that adds a list of items to the end of the list

HTML (no changes):

<div id="page">
      <h1 id="header">List King</h1>
      <h2>Buy groceries</h2>
      <ul>
        <li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic vinegar</li>
      </ul>
    </div>

Part 2

// Remove the third item from the list
const three = document.querySelectorAll('li')[2];
three.remove();

// Add new item to the start of the list
const groceryList = document.getElementsByTagName('ul')[0];
const newItem1 = document.createElement('li');
newItem1.textContent = 'peaches';
groceryList.insertBefore(newItem1, first);
           
// Add new item to the end of the list
const newItem = document.createElement('li');
newItem.textContent = 'kibble';
groceryList.appendChild(newItem);      
      
// Create a function that adds a list of items to the end of the list

function addNewItem (groceryItem) {
  const groceryList = document.getElementsByTagName('ul')[0];
  const grocery = document.createElement('li');
  grocery.textContent = groceryItem;
  groceryList.appendChild(grocery);
}
addNewItem('smoked salmon');
addNewItem('Timothy hay');
addNewItem('ice cream bars')