Goal: In the DOM manipulation lesson, we learned:
- The visual representation of the DOM's parent, child and sibling relationships
- How a child element will be inserted at the top of a
<ul> tag with .prepend() and at the end with .append()
- How to correctly select DOM elements and delete them
Practice manipulating the DOM with your partner by completing the exercises listed below.
Warm Up
- What is the difference between
.prepend() and .append(). Describe an example of using each.
- What is the difference between
.prepend() and .before()? What about .append() and .after()?
- Write a line of jQuery that selects an element on the DOM with the id of "salad".
Code
DOM Manipulation Practice
Practice adding some interactivity to your web pages:
- Follow along with the lesson and build a page that "talks" to the user.
- Practice selecting certain HTML elements and changing the background color to green.
- Now practice removing those elements, just like in the lesson.
- Make a "cat vs dog" page - if you click a button for the cat to meow, the dog should bark back, and vice versa. Use Bootstrap to style your pages!
- In addition to
.prepend() and .append(), you can add content before or after the selected tags (rather than within them) with .before() and .after().
- Make a page where if a user clicks on an element some sort of image gets inserted into the page before or after that element. Allow the new image to be removed by a click as well.