8.4 Adding and Removing Elements

Hi folks, in this lesson we're going to focus on the different ways of adding or removing elements from the page. This is a very common task, but it's not always as straightforward as you might expect. The easiest way to add a new element to the page is with the appendChild method, which inserts a new element at the end of a parent element. So the new element becomes the parent element's last child. Let's first create a new element, and then we can add it to the page. We can see that our new div element has been added right at the end of the body. If we want to insert an element at the start of another element, so that the new element becomes the first child of the parent, rather than the last child, we need to approach things in a slightly different way. So this time we need to use the insertBefore method instead of the appendChild method. This method takes two arguments, the first argument is the new element that we're inserting, and the second argument is a reference element that the new element should be inserted before. And we don't have this reference element yet, let's just select one from the page. And this time we can see that our new div has been inserted before the h1. Removing elements is a bit easier, we just use the removeChild method which works in the way that you probably expect that it would. And now the new div has been removed. So the removeChild is called on the parents that we'd like to remove the child from, and if the child cannot be found, an error will be thrown. So we should usually check that the element exists before we try to remove it. We can use the contains method to see if the parent has a particular child. So let's just try to remove our newDiv element twice. And we see that there's an error, it failed to execute removeChild because the child is not actually a child of the Node, and that's because we've already removed it. So let's use the contains method now, just to add some defensive checks around this second removeChild instance. So we use the contains method to see whether a parent contains a child. And we need to tell the method which child we'd like to search for. So in this case we're searching for the newDiv that we already removed on the previous line. When we go back to the browser, now we see that the error has disappeared, because it hasn't tried to remove the child that was already removed. Because contains returned false. As well as removing an element, we can also replace it with another using the replaceChild method. And we can now see that the heading is no longer on the page, and if we inspect the elements, we can see that our new div has taken its place. So, the replaceChild method works in a very similar way to the insertBefore method. We add the new element as the first argument, and a reference element, which is the element that's going to be replaced, as the second argument. So in this lesson we looked at the different methods that Nodes have for inserting or removing new content. With these methods we need to either have a reference to an existing element, or to create a new element from scratch. We saw how to insert new elements as the last child of a parent element with the appendChild method, or how to insert them as the first child of a parent, using insertBefore. We also saw how to remove elements completely with the removeChild method, how to detect whether an element has a particular child using the contains method. Or how to swap elements with the replaceChild method. In the next lesson we're going to see how we can create new elements and other types of notes programmatically, including document fragments. Thanks for watching.