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

[simplyskandi]

Things are getting sooo interesting! Enjoying the exercises so much more now since we can see everything visually!

[ab_semi]

Hi Nader, I need your advice:

I am creating a website for learning Dutch language, and it has 40+ pages. Each page has the side-menu with 40+ items.
And if change the name of the lesson in one page, I have to change them in all 40 pages.

Is it possible to create something like a component for the side-menu (just one file) and use it for all 40 pages?

[EliHacıyev-pv]

If(attributes && typeof attributes === "object" && > 0 {
for( const key in attributes) {
If(attributes. hasOwnProperty(key)) {
Paragraph.setAttribute(key, attributes[key])}}}