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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.5 Creating Elements and Other Nodes

We can create a number of different things, such as elements, attributes, and comments, using the document interface. We can also create a lightweight version of a document called a documentFragment. This lets us manipulate elements in memory, improving performance. We’ll look at these topics in this lesson.

Syntax

  • createElement
  • createComment
  • createDocumentFragment

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.5 Creating Elements and Other Nodes

Hi, folks, in this lesson we're going to look at how we can create new elements and other document related things. We've seen how to select existing elements from the page, but what about if we want to create a brand new element from scratch? To do this, we need to use the createElement method. The createElement method is a method of the document object, and it takes a single argument, which is the tag name of the element that we want to create. Once the element has been created, it acts like a node that we have selected from the page. So we can edit any of its properties like ID, or class name, or edit its contents. The element behaves exactly like a regular element, but until it gets added to the page, it only exists in memory. As well as creating elements, we can create other DOM related things, such as attributes or comments. To create a comment, we use the createComment method. The createComment method also takes a single argument, but this time the argument is the text for the comment. To create an attribute, we can use the createAttribute method. But the setAttribute method of DOM loads is generally preferred to using this createAttribute method. So we're not gonna look at that today, but feel free to look it up if you're curious. Another type of thing that we can create is called a document fragment. This is very similar to a proper document, except that it contains a much smaller API, and is seen as a very lightweight version of the document. To create a document fragment, we use the createDocumentFragment method. This method doesn't take any arguments at all. Let's just go back to the browser briefly, we haven't actually logged anything to the console yet in this lesson. But I just want to show you the difference between a document and a document fragment. So let's just look at a document object, briefly. So we can see that the API for a document is huge, and there are many, many properties and methods that we can make use of. And a lot of data and information. A document fragment, however, as you can see from the size of the scroll bar here, has a much, much smaller and simpler API. And this makes it a much smaller, much more lightweight object. And this really is the point of document fragments. We can create one programmatically, add a bunch of new elements to it, and operate on those elements in any way that we need to. And all of this happens in memory, which is much, much faster compared to the real DOM. Once we're done working with the elements in the document fragment, we can then insert the fragment into the page. And these elements become part of the proper document. We can't append the document fragment directly to the main document, however, we need to add it to an element. So let's just go to our index.html page, and let's add a new element to the page here. So we've added a simple new div, and we've given it an id of target. So now that we have a document fragment, let's just add the new div element that we created to it. And now let's insert that document fragment into the actual document. And let's go back to the browser now, and we can already see that the new element has been added to the page, let's just inspect that. So we can see that it has been added as a direct child of the target div. The document fragment has been discarded completely. So in this lesson, we saw how to create brand new elements as well as other types of nodes like comments or document fragments. We also looked at what a document fragment is and we saw that it can be used as a temporary in-memory container for elements that we have created before we're ready to insert them into the page. In the next lesson, we'll go on to look at an incredibly important aspect of the DOM, DOM events, thanks for watching.

Back to the top