8.5 Creating Elements and Other Nodes

Hi, folks, in this lesson we're going to look at how we can create new elements and other document related things. We've seen how to select existing elements from the page, but what about if we want to create a brand new element from scratch? To do this, we need to use the createElement method. The createElement method is a method of the document object, and it takes a single argument, which is the tag name of the element that we want to create. Once the element has been created, it acts like a node that we have selected from the page. So we can edit any of its properties like ID, or class name, or edit its contents. The element behaves exactly like a regular element, but until it gets added to the page, it only exists in memory. As well as creating elements, we can create other DOM related things, such as attributes or comments. To create a comment, we use the createComment method. The createComment method also takes a single argument, but this time the argument is the text for the comment. To create an attribute, we can use the createAttribute method. But the setAttribute method of DOM loads is generally preferred to using this createAttribute method. So we're not gonna look at that today, but feel free to look it up if you're curious. Another type of thing that we can create is called a document fragment. This is very similar to a proper document, except that it contains a much smaller API, and is seen as a very lightweight version of the document. To create a document fragment, we use the createDocumentFragment method. This method doesn't take any arguments at all. Let's just go back to the browser briefly, we haven't actually logged anything to the console yet in this lesson. But I just want to show you the difference between a document and a document fragment. So let's just look at a document object, briefly. So we can see that the API for a document is huge, and there are many, many properties and methods that we can make use of. And a lot of data and information. A document fragment, however, as you can see from the size of the scroll bar here, has a much, much smaller and simpler API. And this makes it a much smaller, much more lightweight object. And this really is the point of document fragments. We can create one programmatically, add a bunch of new elements to it, and operate on those elements in any way that we need to. And all of this happens in memory, which is much, much faster compared to the real DOM. Once we're done working with the elements in the document fragment, we can then insert the fragment into the page. And these elements become part of the proper document. We can't append the document fragment directly to the main document, however, we need to add it to an element. So let's just go to our index.html page, and let's add a new element to the page here. So we've added a simple new div, and we've given it an id of target. So now that we have a document fragment, let's just add the new div element that we created to it. And now let's insert that document fragment into the actual document. And let's go back to the browser now, and we can already see that the new element has been added to the page, let's just inspect that. So we can see that it has been added as a direct child of the target div. The document fragment has been discarded completely. So in this lesson, we saw how to create brand new elements as well as other types of nodes like comments or document fragments. We also looked at what a document fragment is and we saw that it can be used as a temporary in-memory container for elements that we have created before we're ready to insert them into the page. In the next lesson, we'll go on to look at an incredibly important aspect of the DOM, DOM events, thanks for watching.