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>
window.onload event handler in
scripts.js. Remember: all code that accesses or manipulates the DOM needs to be called inside of the
window "load" event handler. Why? That's because we need to wait to run our DOM manipulating code until after our webpage has loaded all of its HTML (and other resources).
Next, start by removing the H1 tag "Favorite Things!" from the DOM — that's not what this website is about.
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.