Exercise Tuesday

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.