Skip to main content

JavaScript Creating Elements — exercises and bug fixes

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

Exercises(5)

  1. 1

    Create and attach an element

    easy10 min

    Create a paragraph, put it in the box, and report how many exist.

  2. 2

    Set content before attaching

    easy10 min

    Create a button with the text Save and report its text.

  3. 3

    Build a list in a loop

    easy10 min

    Create one list item per name and report how many were made.

  4. 4

    Set a class on a new element

    easy10 min

    Create a div with the class card and report its class.

  5. 5

    Clone an element

    medium10 min

    Clone the row and report how many rows there are afterwards.

Find the bug(5)

  1. 1

    Fix the element never attached

    easy8 min

    A created element is invisible until it is appended.

  2. 2

    Fix the tag written with brackets

    easy8 min

    createElement takes a tag name, not markup.

  3. 3

    Fix the element created outside the loop

    easy8 min

    One element is being reused, so only the last name survives.

  4. 4

    Fix the shallow clone

    easy8 min

    cloneNode without true copies the element but not its contents.

  5. 5

    Fix append called on the new element

    easy8 min

    The new element is being appended to itself instead of the box.

Ready to write the code?

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

Open the workspace