Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101003 Viewers
61 Video lessons · 87798 Viewers
71 Video lessons · 71674 Viewers
56 Video lessons · 103561 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.