Skip to main content

JavaScript Inserting Elements — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript Inserting Elements lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add to the end

    easy10 min

    Append a new item and report the text of the last one.

  2. 2

    Add to the start

    easy10 min

    Prepend a new item and report the text of the first one.

  3. 3

    Insert as a sibling

    easy10 min

    Put a paragraph after the box and report how many children the box has.

  4. 4

    Append text

    easy10 min

    Append the text and end to the paragraph, then report the whole thing.

  5. 5

    Move an existing element

    medium10 min

    Move the first item to the end and report the last item's id.

Find the bug(5)

  1. 1

    Fix append used where prepend is needed

    easy8 min

    The item should go to the front of the list.

  2. 2

    Fix after used where append is needed

    easy8 min

    The item landed beside the list instead of inside it.

  3. 3

    Fix the element copied instead of moved

    easy8 min

    Appending an existing element moves it, so no clone is needed.

  4. 4

    Fix insertAdjacentHTML at the wrong position

    easy8 min

    The new item should go first, not last.

  5. 5

    Fix the two items added separately as one string

    easy8 min

    Two elements should be added, not one holding both names.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace