Exercise Wednesday

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. First, follow along with the lesson and build a page that "talks" to the user. Then pick another practice project below to create.

Follow Along With the Dom Manipulation and Traversal Lesson

  • 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.

Cat Versus Dog Website

In addition to jQuery's .prepend() and .append() methods, you can add content before or after the selected tags (rather than within them) with jQuery's .before() and .after() methods.

  • Make a "cat vs dog" page - if you click a button for the cat to meow, the dog should bark back, and vice versa.
  • Optionally, use Bootstrap to style your pages!

Website with Surprise Images

  • Make a page where if a user clicks on an element an image gets inserted into the page before or after that element.
  • Allow the new image to be removed by a click as well.

Lesson 43 of 65
Last updated May 23, 2022