Dom manipulation sample

The HTML

<ul id='dress-list'>
  <li class='dresses'>Pink Dress</li>
  <li class='dresses'>Blue Dress</li>
  <li class='dresses'>Black Dress</li>
  <li class='dresses'>Red Dress</li>
</ul>

** The answer **

// add another dress
let dressList = document.getElementById('dress-list') // query the dressList object
let newDress = document.createElement('li') // create a new dress element
newDress.innerText = 'White Dress' // add text to the new dress element
dressList.appendChild(newDress) // append the dress element

// add prices to all the dresses
let dresses = document.getElementById('dress-list').children // returns an array of child elements of the ul with id 'dress-list'
dresses.map(function(dress){  // loop through each dress in dresses
  dress.innerText = '$29.99 - ' + dress.innerText // add the new text to the existing text
})

aspencer8111/dom-manipulation-sample.md