Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks
Skill Level Intermediate
In the last movie, we learned how to move things around in the DOM by cloning and then removing a node. If you're just trying to replace an existing element then there's a function that does just that. replaceChild lets you take a node and replace it with another node. Since it's replacing a child you have to call it from the parent node, so it can be a bit confusing to use. This method is more convenient than cloning and replacing. You don't have to delete the original node. So, let's take a look at this in our project. So, I'm going to pull up the console. To replace a node, we need to get both the node we want to move and the one we want to replace.
So, I want to move this same list of artists, right here. I'm going to click on a magnifying glass. Click on one of these just to get the path right here. And these very useful bread crumbs that kind of tells us where we're at. So I know that this whole section is called featured artists. So that's what I want to move. This time I don't just want to move the photos I'm going to take this whole section. So first I'll create a variable here called my node. I use query selector and I want to get that entire list of featured artists.
So I'll get the element with the ID of featured artists. (SOUND) And again, you want to be careful that you use querySelector, not querySelectorall, or you'll get an array of element, even if it's the only element in the page with that ID. So, next, I'm going to do a variable for replaceNode and I'm going to find document.querySelector. And this time I'm going to look for the item comingtoevent. So, this is the item that I want to replace.
And so if I look at that, let's see this is coming to the event. So I want to replace this feature artist with coming to the events section. So, I can show you where that is. Click on the magnifying glass, click-right here and it tells you there's the I.D. that we're looking for coming to event. So hit Enter. So now you can just issue a replaceChild method. Just like cloning, we have to replace the child in the parent node for it to work. So here we go. We'll use replace node. And then we'll say, I want to get the parent node of this element and replace child.
And what I want to do is replace my node with this replace node and the position that we want to replace with. And when I hit Enter (SOUND), I've replaced this section right here with this section called featuredartists that I imported from my node. So that's a pretty fast way of moving things around. ReplaceChild saves you the step of having to delete the original node.