From the course: JavaScript: Enhancing the DOM (2013)
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Replacing existing nodes
From the course: JavaScript: Enhancing the DOM (2013)
Replacing existing nodes
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.