Changing DOM Element Content

[00:00:00]
>> So now if I go to the home, I go to order. If you look at the URL, it says /order. Do we have that order file on the server? No. We can just fake the URL. That's history.pushState. You can pass anything here. And that's what you will see in the URL.

[00:00:24]
You can even pass I will change this, something like this, something/something-else/ and then the route. And that's what you're going to see in the URL. So, look at the URL now. Something/something-else. You are just faking. And it works. The browser will take whatever string we pass as the URL.

[00:00:55]
So it's actually interesting. So what do we need to do? Well, we need to use again, with an abstraction layer on top of this we can have an array of routes and loop through an array but I wanna keep things simple here. So I can just make a switch over that route and say, okay, let's see if it's the forward slash or it is the order.

[00:01:20]
So let's do these two first. I'm gonna do the break because this is JavaScript. And what I need to do is to, for example, do something with the DOM. Remember, we need to hide and show or we need to inject new elements. I will pick for this part of the workshop to use the technique of removing the old page and injecting the new page, okay.

[00:01:48]
So we're going to remove from the DOM and put into the DOM. Where in the HTML for that I have an empty main element. That looks pretty good for that, okay. So I'm going to take that main element and based on the URL I'm going to inject DOM elements or remove DOM elements.

[00:02:08]
It makes sense? So what I need after the switch, okay? So after the switch, what I need is probably to add, take that main element. And I'm going to call appendChild with the element that the switch has decided to render. Make sense? I'm probably going to refactor this as we are adding more features, but that's kind of the idea.

[00:02:40]
And because of that, maybe we want to create a variable here. We can call this page element. We start with null. And then we append over the main element, that page element. So what we need to do is to create different elements based on the URL. For now, the first part will be to just create, for example titles.

[00:03:09]
How to create an element in HTML, document.Create. Create element receives the tag name. So I'm just creating an h1 that lives only in memory. Just in memory. But I can take that element and change its text content and I can say, this is the homepage or the menu.

[00:03:38]
And for the order I can use something similar but say this is the order, your order, we will replace that later with something better. Is it done? Not yet, and you will see the problem that we have, that is a pretty common problem when you're doing VanillaJS. So that's why one asked to get into the problem.

[00:04:00]
So if we try this we can see something like that, it says Menu, and if I go to the cart, it says Your Order, if I go back here Menu, Your Order, Menu. This is a pretty common problem in VanillaJS. When you are injecting new elements, what's the problem?

[00:04:20]
We are not removing the previous one. Makes sense? So we need to clear the container before actually injecting new content. There are two ways to do that. The quick and dirty way, okay, and the other one. So for this particular example, both will work. I will show you both anyway.

[00:04:44]
Okay, so one way is before appending this child, clear this out, the quick and dirty way is we can take the main and change its inner HTML. Be careful with capital H-T-M and L, and just say empty string. This is a quick and dirty way to delete everything in the main, Element.

[00:05:14]
Why it's quick and dirty? Yeah, because it's a string, okay. If we have event listeners we are not caring what's inside, and yeah. What is the other way? Well, the other way that we have is that we could take the main element and there is a property that will get us the child nodes.

[00:05:37]
And also, we have children. What's the difference between childNodes and children? Looks similar. Well, children will give you an HTML collection, and childNodes, it's a NodeList of words blah, blah. What's the difference? ChildNodes will also give you comments as objects and text as object. For example, if I have here, I have a node.

[00:06:01]
It's the empty text. Even the newline character. So I'm talking about the difference about this and this. Here I do have a node inside the list, like a lot of spaces and characters. So I don't want that. I just want DOM elements so that's why we use children and not childNodes.

[00:06:22]
So anyway, you say children and sub zero if we have one, so we should check if we have one, is the first DOM element and we can ask for removal. Again, just showing you how to do that in different ways. And by the way, can you see that we are making the same inquiry twice.

[00:06:46]
Well, we can cache that. How? Creating a variable or a constant. That is not really a constant, it's an immutable variable, but that's for another day. So we do something like this, and that will improve a little bit performance. For this example, it's not a big deal, and some browsers are also optimizing this.

[00:07:08]
So it's not going to change too much. But now at least when we are changing the URLs, now it looks a little better. We still have a problem that what happens if it goes to default, because I don't have, like this will be null. So maybe we should check if we do have a page element to render.

[00:07:34]
If we don't have a page to render, it's because the router didn't find a valid route. There are two options. Do nothing, send an error to the console, or create a client-side 404 page. That will be another component say, hey there is an error, that URL does not exist.

[00:07:56]
Okay, one more small thing. After appending the child it's a good idea when you're doing routers to set the scrollX. And scrollY to zero. Why? Because if not, when you have large pages with lots of content and you are scrolling the page, when you change the route you will still be at that scroll position, okay?

[00:08:27]
And we wanna go to the top, both horizontally and vertically.