In the previous episode, we created some content. It's just a string that contains some HTML. We assigned that to the innerHTML property on the ul, so that of course, inside of the browser, we see those items. And there's technically nothing wrong with that approach. It can be a little cumbersome to generate a string of HTML, but a lot of times, that's what we need to do. However, the DOM gives us practically everything that we need to, first of all, find elements, to create them, to manipulate them, as well as remove them if we need to. And we know how to find elements, so I want to create elements. So I'm going to comment out where we set the innerHTML for our rulesList element. And we want to create our own liElements. And since we need to create three of those, it makes sense to extract this into a function, so that we could have a function called create

And we want to create our own li elements. And since we need to create three of those, it makes sense to extract this into a function, so that we could have a function called createLiElement that is going to have some content. And then we will just create that element. So the document object is the beginning point for just about everything, for finding elements, and in this case, for creating elements. We have a method called createElement, then we pass in the tag name of that element. And then from there, we could say elements.innerHTML equals content. And there's literally nothing wrong with that approach, but since we are working with DOM methods, let's just keep using them. So we need to set the content of our element, and content is really nothing more than text. But as far as the document object model is concerned, text is a node. In fact, it's called a textNode. So we need

of our element, and content is really nothing more than text. But as far as the document object model is concerned, text is a node. In fact, it's called a text node. So we need to create a text node that's going to contain our content. And just like creating an element, the document has a method called createTextNode. And then we pass in the content that we want that text node to have. But now we end up with two objects. We have an element object and a text node object. And right now, they're completely separate. There's no relationship between those. So basically, we want to make the text node a child of the element. And we do that with the appendChild method. So we have element.appendChild, and then we specify the child that we want to append. And then we can return that element. So we have created an element, we have created a text node, we append that text node to the element, and

the child that we want to append. And then we can return that element. So we have created an element, we have created a text node, we append that text node to the element, and then we return the element so that then for our rules list element, we can append those li elements. And just like the li element, our ul element has a method called appendChild so that we will call createLiElement. And then we just need to specify the content that we want this element to have, which is basically what we had before to where we have the min values, and then we have the max and the max attempts. So let's just make those simple changes. And whenever we view this in the browser, we are going to see the same result because we are essentially creating the same content. We created three li elements that have their specific content. But by creating these three elements and appending them individually,

because we are essentially creating the same content. We created three li elements that have their specific content. But by creating these three elements and appending them individually, we have created an inefficiency. Because anytime that we make a change to the document, the browser has to redraw that part of the document. Sometimes it has to redraw the whole thing. And that's not very efficient at all. So essentially what we want to do is limit the amount of times that we update the document. And thankfully, we have a tool to do that. We can create what's called a DocumentFragment. So we have a method called createDocumentFragment. And this is, well, it's a fragment of a document. It is independent of the document that is loaded into the browser. So this gives us an opportunity to essentially load this fragment with whatever elements that we need. And then we can append this fragment to the document in one change.

into the browser. So this gives us an opportunity to essentially load this fragment with whatever elements that we need. And then we can append this fragment to the document in one change. So the browser only has to redraw one time. So we have our fragment. We're going to change where we append these li elements to. We're going to append them to the fragment so that then we can say rulesListElement.appendChild(), and then we will append that fragment. So again, inside of the browser, we're going to see the same result. But now we are a little bit more efficient because we aren't updating the document three times. We're doing it just once. And that's what we want to strive for. But of course, that's just adding content to an element that didn't have any content to begin with. What about changing the text for our title? Because we used innerHTML there. So let's comment that out and let's essentially create a text node. So let's call this title

content to begin with. What about changing the text for our title? Because we used innerHTML there. So let's comment that out and let's essentially create a text node. So let's call this titleTextNode. And we will create another text node that will have our easy game content. And of course, now that we have this text node, we want to append it to that h2 element that has our title. So we can say gameTitleElement.appendChild. We'll pass in the titleTextNode. And whenever we view this in the browser, we see, well, it's not the results that we were hoping for. Because we didn't remove the existing content. We just took some new content and appended it to the existing content. So whenever you append content, it doesn't matter if it's a text node or an element or whatever. When you append something to a parent, that new content will be placed at the end of that parent, just like what we have here. So this is an h2 element that already had a text node. It was

whatever. When you append something to a parent, that new content will be placed at the end of that parent, just like what we have here. So this is an h2 element that already had a text node. It was game title. So whenever we created a new text node and we appended it to that h2 element, it just added that content to the end. It didn't replace anything because we were literally appending new content to it. So if we want to replace content, it's a little bit more involved because we have to remove the existing content. So our goal now is to completely remove all of the content from this game title element. And of course, we did that by using innerHTML, but we're kind of getting away from that. innerHTML is fine, just know that. But if we need to use DOM methods and we can only use DOM methods, then yeah, we need to know how to do that. And thankfully, it's very easy to do because we have a method called replaceChildren. And all we have

DOM methods and we can only use DOM methods, then yeah, we need to know how to do that. And thankfully, it's very easy to do because we have a method called replaceChildren. And all we have to do is just call that method. That's going to completely wipe out the content of the element so that we can add new content to it. So now, inside of the browser, we see easy game because we replaced all of the existing content before we appended our new content to it. Now, I fully understand that talking about the DOM methods, talking about how to create content, updating content, things like that, isn't necessarily, I'm not going to say useful because it is useful. I am a firm believer in understanding the fundamentals of whatever technology or language or platform that you're using. But with modern JavaScript, if you're using Vue, React, Alpine, any one of those UI libraries, you're not going to be doing this.

technology or language or platform that you're using. But with modern JavaScript, if you're using Vue, React, Alpine, any one of those UI libraries, you're not going to be doing this. Those libraries are going to handle everything for you. It's going to handle creating those nodes, updating them, removing them from the document. Everything is going to be handled by the library, so you don't have to worry about it. But still, I think it is good to at least know what these methods are because at some point in time, it might be years down the road, you might need to use them.