WDI Fundamentals Unit 10
Below is the starter code for your next exercise. If you don't see the JS Bin, please refresh the page.
In this exercise we're going to practice manipulating the DOM by updating our "Reading List" site, which is a little outdated.
Let's get started!
querySelectorAll() method to select all elements with the
current class. Using array syntax (our trusty square brackets), find the second element with the
current class, and update the text content to "Me Talk Pretty One Day."
getElementById() method to find the element with the ID
next. We want to add a link to this book so we can purchase it. Change the inner HTML of this element to include an anchor:
<a href="http://www.amazon.com/Flamethrowers-Rachel-Kushner/dp/1439142017/ref=sr_1_1?ie=UTF8&qid=1458897183&sr=8-1&keywords=the+flamethrowers">The Flamethrowers</a>.
Find the first
li using the
querySelector() method. Change the inner HTML to
The Wind Up <strong>Bird</strong> Chronicle.
Find the fourth list item using the
querySelectorAll() method. Change the text to "I'm the fourth!"
getElementsByTagName method to select all
li elements. Then, use a
getElementsByClassName method to select all elements with the
current class. Then, use array syntax to select the first item from that class and change the inner HTML to "Manipulating the DOM is fun!"
Nice work! Now, let's dig in a little deeper.