Learn DOM Manipulation In 18 Minutes

There are a million ways to manipulate the DOM, but you really only need to know 14 different techniques. So, in this video, I'm going to show you every single one of them so that you can become a DOM manipulation master. Welcome back to Web Dev Simplified. My name's Kyle, and my job is to simplify

the web for you so you can start building your dream project sooner. So, if that sounds interesting, make sure you subscribe to the channel for more videos just like this. Now, in this video, I'm going to be covering everything you need to know about DOM manipulation. And to get started, I just have a blank HTML file that links to a

script file, and then in here I have our script file. We can write code in here, and it's going to run on this page on the right side of our screen, which as I mentioned is a completely blank page so far. And if you're interested in taking your JavaScript skills to the next

level, make sure you check out my full JavaScript course linked in the description below. It doesn't open for a couple months, so if you're interested, just go there and sign up with your email. I'll let you know when it opens. Or if you're from the future, go there and you can check out the complete

course right now. So, without any further ado, I just want to jump into the very first technique of DOM manipulation that I want to cover, which is adding elements to the page. Super simple. There's two different ways that you can add an element to the page. The first thing I want to do is select the

element we're going to be adding this to, which is going to be the body. So, I'm just going to get a variable and set it to the body. So, we can just say document.body, and that's going to be the body, which we can append elements to. And speaking of the word append, that is the method we use to add