Exercises: DOM Manipulation - Creating Elements - DOM In Depth
We go through some exercises to get more practice with creating elements and manipulating the DOM in Javascript together.
In the warmup we look at how we can create an h1 tag in the developer tools to add to an existing HTML Document and DOM.
We then look at how we can create a nested Element using the DOM API in Javascript to create a paragraph tag with text nodes and a strong tag inside.
In Exercise 2 we see how we can abstract creating elements by writing our own functions as small wrappers over the DOM element creation methods.
We wrap up the video with a more complex DOM manipulation tasks to add and remove elements from the DOM as well as using setInterval.
Chapters:
00:00 Introduction
00:30 Warmup Exercise - Creating h1
06:43 Exercise 1 - Nested p tag
16:55 Exercise 2 - Element Creation Function
29:34 Exercise 3 - setInterval DOM Manipulation
47:08 Next Steps
📦 Github Repository with the notes and exercise code+solutions: https://github.com/Nooder/dom-in-depth
💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader