Goal: In the lessons on adding and removing HTML elements, we learned how to use 6 methods:
document.createElement()to create new HTML elements.
Element.append()to add text to an HTML element, or to add an element inside and at the end of another element.
Element.prepend()to add an HTML element to the beginning and inside of an element.
Element.after()to add an element after an HTML element.
Element.before()to add an element before an HTML element.
Element.remove()to remove the HTML element that the method is called on.
Familiarize yourself with these methods by completing the exercise below.
Element methods we learned about in the "Adding and Removing HTML elements" lesson. (Keep reading for further instructions.)
Start by creating a project with the following file and folder structure. You can name your project whatever you prefer.
website-recreation-practice |_ js |_ scripts.js |_ index.html |_ README.md
Here's what you should have in
index.html to start:
<!DOCTYPE html> <html lang="en-US"> <head> <title>Webpage Recreation Practice</title> <script src="js/scripts.js"></script> </head> <body> <h1>Favorite Things!</h1> </body> </html>
Then, in any order that you prefer, recreate the webpage's HTML in
scripts.js so that it contains all of the HTML listed in the first example. Use the DevTools console to try out code, and reference the "Adding and Removing HTML Elements" lesson as needed.
Lesson 15 of 50
Last updated July 15, 2022