Let's take a look at how we can create DOM elements. I have some basic HTML here, and say we want to create a new li element, which are currently a list of to-dos. And we'll make sure to build out an entire to-do app in the future. So we want to use JavaScript to create a new li element. So we can use the createElement method on the document object. So let's make a variable named li, so const li equals document.createElement('li'). And if we console.log that, that should be an empty li element, and it is. Now we can use any methods or properties we've already been using on DOM elements and nodes.

And if we console.log that, that should be an empty li element, and it is. Now we can use any methods or properties we've already been using on DOM elements and nodes. For example, if I wanted to add a class on it, we can say classList.add, so li.classList.add, and give it a class to-do item, for example. And now that should have a class of to-do item, and it does. Say we wanted to give it an ID, we can say li.setAttribute. The attribute is an ID, and the value of the ID is whatever we want, so to-do item. And how about we actually give it some text content? So we can say li.textContent equals new to-do item. So again, this is our list item element, but it's not currently in the DOM.

So we can say li.textContent equals new to-do item. So again, this is our list item element, but it's not currently in the DOM. So what we want to do is append it right here, after this one. So there are a few methods we can use to do this. We can make use of appendChild. So first we have to grab the UL. So how about we say const UL equals document.querySelector, and we'll grab the UL. Now we have access to that unordered list, and one method we can make use of to append elements is appendChild. Let me just move this up here.

So if I go in here, highlight this, we get to-do item, to-do item, and obviously the text content. Now we can also make use of the append method, which is a bit newer and a bit more versatile. So for example, if I created another li here. So let's just do that again. Actually, let me just grab this and paste it down here, and let's name it li2. It's still a list item. I don't need a class or an ID, and let's just add again here. Actually, instead of using text content, we can append a text node directly using append. So instead of li.textContent, we can say, actually that should have been li2, but we

Actually, instead of using text content, we can append a text node directly using append. So instead of li.textContent, we can say, actually that should have been li2, but we can say li2.append, and we can give it the text content. So new to-do item again. And these two lines are pretty much the same. Now when I go to append this list item to the unordered list down here, or right here actually, we can use appendChild again, but it doesn't take multiple params. We have to do it like this. So we need two lines, and that would work. Sorry, that should be li2.

So we need two lines, and that would work. Sorry, that should be li2. And there it is. Or if we use append here, we can give it multiple parameters. So instead of appendChild, we can just say append and add multiple nodes here, li2. And we don't need this anymore, and that should work as well. And it does. So append can detect if it's an element or a node, and it will add it accordingly. For example, if I mixed another text node within here, say anything, it's going to add this as a text node after the last li.

So if we have the P selected, and use this method, if we specify beforeBegin, the element we're inserting goes here. If we specify afterBegin, it goes here, beforeEnd goes here, and afterEnd goes here. So if we use this method, then we can either append the element as a child in these two cases here, or as a sibling in these two cases here. So let's try that out. Let me just make another element here, I'm going to grab this. And how about we make it an image element. So underneath this, let's rename this to image. The tag is an IMG.

So underneath this, let's rename this to image. The tag is an IMG. And we need some attributes on this. So we can say image, you can use setAttribute, but you can also just specify a property on it directly. So we need a src attribute. And we can specify this. And I'll just use a placeholder image here. So https://picsum.photos/ the size, okay, that should be fine. And we also need an alt attribute, image.alt equals cool photo, okay, that should be fine.

So HTTPS, picsum.photos, slash the size, okay, that should be fine. And we also need an alt attribute, image.alt equals cool photo, okay, that should be fine. Now if you wanted to, you can just append it anywhere on the body. So you can see the body tag here, but it's going to be added as the last child. So let's try that out. First, we should have access to the document using document.body. We can say append. Actually, that's not a method. append. And we can append the image. And that should work.

So it actually goes underneath the script tag here. So you can see we have our body here. Like I showed you earlier, generally speaking, you want to have the script tag as the last element. But since we appended something, the image goes underneath this. So if you look down here, we have our script tag. And then underneath that, we do have our image. But if we use insertAdjacentElement instead, we have more control over where it goes. So instead of appending it to the body, we already have our onOrderList. So we can say ul, we can use that new method, insertAdjacentElement.

So instead of appending it to the body, we already have our onOrderList. So we can say ul, we can use that new method, insertAdjacentElement. And again, the first param is the position you want it in. And in this case, let's take a look at the docs again. We want it after end here. So it will go right after the selected element as a sibling. So let's do that. After end. Let's save that, take a look at DevTools again. And now it should be right after the onOrderList here.

Let's save that, take a look at DevTools again. And now it should be right after the onOrderList here. It looks like it is before the script. So it is working. Okay, now let's take a look at cloning nodes. Let me just get rid of all of this. And let's add another list item here to our to-do items up here in our HTML. And say this list item had nested elements and a bunch of classes as well. So we can say li.todoItem.flex, or any other classes. And say it had nested elements like the actual content.

So we can say li.todoItem.flex, or any other classes. And say it had nested elements like the actual content. So span.todoContent and actual.todoItem. And say it had a button to delete it as well. So we can say button.icon. And how about we just put an X in here. And let's save that. Okay. And let me just get rid of the appending here. So we'll just comment this out, or sorry, this, these two lines here.

And let me just get rid of the appending here. So we'll just comment this out, or sorry, this, these two lines here. Okay. Now say we were creating a new to-do, and we wanted to have the same structure for each list item, for each to-do item. So we'd have to recreate this using createElement. So we'd have to create this span, add the class, add the textContent. We'd have to create this element, and also add the class and the textContent. We'd have to create this list item here as well, again, add the class, and then add these two as children.

We'd have to create this list item here as well, again, add the class, and then add these two as children. And you can start to see that that would require a lot of lines of code if you had more nested elements. Now, the other option would be to just clone this node entirely, and then just update the content that needs to be updated. So let's see how we can do that instead. So first we have to select the item that you want to clone. So in this case, toDoItem. So let's do that first.

So in this case, to-do item. So let's do that first. Let's say const nodeToClone equals document.querySelector('to-do item'). And it's called to-do item. Okay. Let's make a new variable here to hold the cloned node. So const clonedToDoItem equals nodeToClone. We can use the cloneNode method. And this takes in a Boolean. You can see it says deep, and if it's set to true, then it's going to clone the children.

So what do we want to change? Again, if we go here, we just want to change the content of the to-do item. So this right here. So we can grab the first child here and then change the text content of that. So again, if you remember the last video, we can say clonedToDoItem, not firstElementChild. And we can update that as we want. So let's say another to-do item goes here. Okay. And then we can just append it as we normally would.

Okay. And then we can just append it as we normally would. So we can say ul.append cloned toDoItem. Okay. Let's save that. And there it is. And sorry, I meant to say .textContent here. And just be careful when you're cloning elements, because if it has an id, then it's going to clone that as well. And valid HTML cannot have duplicate ids, but in this case, we're fine because there's

clone that as well. And valid HTML cannot have duplicate IDs, but in this case, we're fine because there's no IDs on it. And of course, you can also remove elements, which I believe I showed in a previous example. But you simply can call remove on an element you have selected to remove it from the DOM. So if I remove the ul, that should be gone. Let me just comment that out. And one more thing I want to mention is you can also use strings to create HTML. So for example, how about we create another this item here. So const anotherLi equals document.createElement, and it's going to be another li here.

And we should see an li with an h2 in here. And we do. And there are benefits to doing it this way. In some cases, it might be easier to create nodes using strings, and you can even easily inject variables. However, note that this has potential security issues if the string here is potentially generated by the user and can contain some malicious code. This is known as cross-site scripting, which we won't get into here. But if any of these strings here are coming from a database and were generated by a user, for example, their profile name or their profile description, then what you want to do here

But if any of these strings here are coming from a database and were generated by a user, for example, their profile name or their profile description, then what you want to do here is make sure you sanitize your HTML. And there are a lot of external libraries that can help you do this. One popular one is called DOMPurify, which you can see here. So yeah, those are some methods and properties you can use so you can create your own DOM elements. Again, we'll definitely be making use of some of these when we work on practical examples in the future.