Creating Nodes in the DOM with JavaScript

welcome in this video we're going to look at how to begin creating our own nodes in the Dom specifically we'll look at text and element nodes since those are going to be the most common ones that you use to do a quick review if we have something like this which is an element node with a text node inside of it we could see that the opening closing paragraph tags are the element node itself and then the text that goes inside of it is the text node these are two separate nodes in the DOM and it's important that we remember that when we begin adding them and creating them ourselves we have at our disposal to helpful functions to begin creating these two types of elements the first is create text node where we simply pass in the value that we want to have as this new text node then we have create element where we pass in as a parameter the type of element we want to create let's go ahead now and look at some examples of this in code so notice that what we're doing here is we are creating a text node using the create text node method passing in some text of lorem saving it as a variable here and then we're using the old properties that we haven't looked at in a while now but hopefully you remember of node type and node value so let's go ahead and log these out and we're getting no type of three which again if we remember back is the type that is for text nodes and then we have the node value so this is pretty straightforward example of how to create a text node now in this example we have the same thing we saw before we're creating a text node but we're also creating an element node and we know what kind it is by using the P tag so this is going to mean that we are creating a paragraph element and notice that I've kind of named it similarly here P than the capital el4 element then we're gonna log out the same information the node type which will give us a number and then inner HTML which will tell us about the actual element itself however what we could see here is that this value is empty and the reason for that is that we have not yet taken our tech snowed and added it inside of our paragraph element here so what we'll look at in the next step is how to do this how to take a text node and insert it in or connect it or technically what it's called is append it into our P element in order to add a text node to an element node we're going to use the method append child this allows us on the left to set what it is that we want to select as our main node in this case it's going to be our element and then we're going to pass in the parameter of what we want to add as the child node now in the example we're going to look at here we're going to take our text node and we're going to append it to our element node but you could also take an element node and append it to another element node let's say you have a paragraph tag and you want to append links into it or let's say for example that we have a div and we want to append paragraph tags into it we could do that as well however in the case we're going to look at now we're going to take a text node and append it to an element node but you could also do element nodes appending to element notes so now we're taking our example one step further we have our text node that we created and then we have our element node that we created and then we're using a pen child to take our text and append it to our paragraph element down below we're going to log out various pieces of information about it we'll get the length we'll get the node value for the value inside of our paragraph element that we just appended and inner HTML so let's log this out and take a look notice that we have the length of children nodes so if we were to not do this appending here and refresh it notice that it has no children and we're getting an error when we try to read the node value of the children but now when we append which means put this inside of at the end and we refresh our page we can see we've got one element and norm is going to be the node value and also when we do inner HTML we will get the same value if we were to do outer HTML you would see that we have our full paragraph with the inside of it so now that we saw a very simple example of just taking a paragraph tag and creating that using the text node and the element node let's take a look now at a slightly more complex example what we're going to be doing in this one I'll just run the code first is we're going to be creating a new paragraph tag with a link inside of it so let's break this down what we're doing here first if we look at this end result of what we have we haven't looked at how to add it to the page yet so we're just playing with the console here we've got our paragraph tag it's got some text and then we should actually see a space there so it's out of space here okay we've got some text and then we've got a link and then inside of the link it says read more so we have this top-level element and then inside of it we have one node which is a text node we have another node which is this link and then inside of that link element node we have another text node here we've also gone ahead and added a custom attribute because of course we want that link to go somewhere so if we come over to our code the first thing we're doing is we're creating from the inside out we're creating this inner text node here which is going to be our anchor text and then we're creating an anchor element again we could create any HTML element we want by simply changing whatever value this is so we're creating an anchor element and then we're going to create the first part of the text this part here that appears inside of our paragraph tag so we're calling that P text and remember we have that space just because if we were to remove that at the very end we'd have no spaces here between the link so we just want to make sure that that's in there and then finally we're going to create the master paragraph element that's going to contain all of it so this is all just setting up and again remember it's a best practice to put all of your variables at the very top comma separated altogether there then we come down and remember the set attribute method this allows us to select our link which we just created and go ahead and add an href with the hashtag link we don't have a true link at this point but if I were to log this out at this point and I put out a element onto the page let's comment this stuff out notice that it is a link but it doesn't come by default with anything going on so just because you created a link doesn't mean that you have the href attached to it as well so we have to create all of that manually here now down the road you'll learn about helper functions that you create to help speed up this process but now you're learning everything from scratch so we set up that attribute we add the href but then there's still no text inside of it so now on this line we're taking our text and we're appending it to the element so if I were to log out the same thing again let me comment out the rest so that we don't see it notice that we have our link but there's no text now if we bring this down one line i uncomment that and put that there now notice that our link is fully built so we're using the appendchild method that we saw before and we've got our link fully built now it's pretty simple to complete the rest what we want to do is we want to add in the first bit of text here notice that this is a text element note or I'm sorry this is a text node that we're adding and then we're gonna add an element node so this is again showing that appendchild can work regardless of what type of node you're working with you just want to make sure it makes sense like you wouldn't append in a text node into another text node because they don't have the parent-child relationship in the same way but you can append both text nodes and element nodes into other element nodes so we do that we create the whole thing and then we log it out here at the bottom so now we have a fully built paragraph and link so this example is pretty good and it's a little more complex and what we've looked at the past but we're going to take it one step further and in order to do that we need to introduce a new concept that we mentioned way back when we were introducing the Dom but we haven't looked at in-depth yet and that is the document at the most basic level a documentfragment is a container for holding nodes the special thing about it though is that when we append or we attach a document fragment into another node the whole document fragment disappears and just the children node are left over so again this is a container node that we could use when creating elements on the fly but then when we append it in that container goes away and we're left with just the elements we want so let's take a look at this in action okay you could see that we have a lot more code going on here and let's just run it in the browser in the console here to see what we get basically what we have is we have a div and a paragraph inside of it another paragraph inside of it and another paragraph and inside each one of those we have a text node so it's going to end up writing out lorem ipsum Maximus okay so when we come back into our code and we look at it here notice at the top we're creating a div that's going to be this main tip here and then we have our document fragment the document fragment is going to store all of these paragraph tags as we build them up and then in the very last step we'll be adding our document fragment directly into the element now you may ask why don't we add these one at a time and the reason is is that sometimes it's easier to store all of these up in memory and then embed them all at once so really it's just kind of a temporary place for us to store elements and then append them at the very end when we have everything how we want so this first few steps here is basically just taking the paragraph text 1 and appending it to the paragraph element 1 again here we see we create a paragraph node a paragraph node in a paragraph node naming them 1 2 & 3 and then we create text nodes with the text that we want in each one of them now again we probably don't need spaces here because these are all going to appear on the same line but if you were inserting them all into one paragraph instead of their own paragraph like we are here then you'd want to put those spaces so once we have all those set up we go ahead and we add each one in to our document fragment and then at the very end we documentfragment into our main div now notice when we run this there's nothing in our code here that says document fragment that kind of document fragment was invisible just that temporary holder in memory and now it's gone so the benefit of this is if we didn't have this we might have to store them all in a div or add them all individually and we might kind of lose place of things so this document fragment is a really helpful tool for us to just work in memory work temporarily on the fly building things up and then at the very end when we insert it in it disappears and we're just left with the contents so if we ever want to create a document fragment we could do that simply by writing out document dot create document fragment we don't have to pass any parameters we just write that out and we get the fragment that we want and then can add to it so let's do a little review now first of all we saw that we can create text nodes on their own and then we saw that we could also create elements by simply passing in the parameter of whatever element we want to create an any HTML element is valid then we also saw that we can append a child element into a parent element this works with both text nodes and element nodes and the other nodes as well you just have to make sure that whatever you're appending it to can take children elements so you wouldn't necessarily append an element node into a text node for example but you could definitely do the other way around and then finally we looked at after doing a few examples of basic appending and more complex appending we looked at how to use document create document fragment to give us a document fragment as a temporary storage for holding things as we build stuff up in our JavaScript so what I encourage you to do now is start doing some practice open up the console or open up your simple text editor and begin trying to create some text nodes begin creating some element nodes and then build them up create a div with a bunch of paragraphs try creating a link try creating some unordered and ordered lists and adding list items to them and then once you get really comfortable doing this and it becomes kind of second nature then in the video will look at how to begin adding these into the Dom itself although I'll give you a hint if you've really paid attention we actually learn something here already that will allow you to not just play with these in the console but add them to the page so for that extra step see if you could figure out on your own just with the tools we looked at in this video how can you get the elements that you built into the actual Dom that's alive in the browser once you try that go ahead and jump into the next video and we'll see how you did

Channel: Zac Gordon

Views: 3,427

Keywords: JavaScript, The Document Object Model, DOM, Nodes, Creating Nodes, JavaScript for WordPress Master Course, Zac Gordon

Id: RQ40ZilvCOg

Length: 13min 56sec (836 seconds)

Published: Sat Oct 14 2017