DOM Manipulation - Creating Elements - DOM In Depth
Let's take a look at the different DOM Manipulation methods as well as how we can create DOM Nodes and Elements.
We start by looking at the different Node and Element creation methods, most notably document.createElement. We also look at how to create text and comment nodes and touch briefly on document fragments.
Then, we look at how these creations methods work in regards to memory versus actually appearing or rendering in the DOM.
We follow this up by looking at the core DOM manipulation methods like before, after, prepend and append. Using these, we look at some examples of each in our Browser. We also look at how we can remove nodes and elements from the DOM.
We wrap up the video with some extra methods we might encounter as well as some of the older methods we might see in legacy code.
Chapters:
00:00 Introduction
01:05 DOM Manipulation Ideas
02:03 Node Creation Methods
05:24 Nodes in Memory
08:31 Element Creation Code Example
13:37 DOM Manipulation Methods
18:33 DOM Manipulation Code Examples
25:30 Removing Elements from the DOM
27:04 Text and Comment Node Examples
29:55 Nested DOM Element Creation Example
33:21 replaceWith and cloneNode Methods
34:40 Older DOM Manipulation Methods
35:37 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