Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.4 Adding and Removing Elements

As well as manipulating elements, we might want to add new ones or remove existing ones. In this lesson we’ll look at the methods we can use to do this.

Syntax

  • appendChild
  • insertBefore
  • removeChild
  • has
  • replaceChild

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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.

Back to the top