1
00:00:00,240 --> 00:00:05,610
So so far, we've only been working with elements that are already existing on the page within the HTML

2
00:00:05,820 --> 00:00:10,920
and with JavaScript, we can do even more, we can create elements, we can create text nodes, and

3
00:00:10,920 --> 00:00:13,730
we can append those elements to other elements.

4
00:00:14,220 --> 00:00:21,630
So the way that it works is we can use the create element method and this is within JavaScript.

5
00:00:21,780 --> 00:00:27,440
And then taking that element, we can append it to another element by using append child.

6
00:00:27,630 --> 00:00:31,020
There's more information on this at the Mozilla Developer Network.

7
00:00:31,260 --> 00:00:33,540
So they have the syntax to create the element.

8
00:00:33,780 --> 00:00:39,270
So specifying the tag name and you also have an option to add in options as well.

9
00:00:39,480 --> 00:00:44,160
They have a basic example of how we can add a div, so we create the element.

10
00:00:44,280 --> 00:00:46,200
You can also create a text node.

11
00:00:46,320 --> 00:00:48,180
So this is how you can add in text.

12
00:00:48,360 --> 00:00:54,090
You can also use that once you've created the element, you can use the element just as you would with

13
00:00:54,090 --> 00:01:01,190
any other object and adding in the inner content, the text content or the inner HTML if you want to.

14
00:01:01,380 --> 00:01:08,190
And there's also the method to create a text node, which also is a way to add in text within the element.

15
00:01:08,310 --> 00:01:11,280
And once you've created it, what you do is you append it.

16
00:01:11,460 --> 00:01:16,140
So in this case, we're creating a div and then we're creating another element.

17
00:01:16,170 --> 00:01:17,550
So this is just a text node.

18
00:01:17,820 --> 00:01:26,640
We're placing the new content text node inside of the new div and then we're placing the new div insert

19
00:01:26,640 --> 00:01:29,070
before the current div.

20
00:01:29,250 --> 00:01:35,880
So we have an option as well of where we insert the element so we can use append child, we can insert

21
00:01:35,880 --> 00:01:38,820
before and we can add in elements into the page.

22
00:01:39,140 --> 00:01:45,840
So let's try this so it can set up a const name at div document and we're creating an element.

23
00:01:46,080 --> 00:01:48,050
So it's the creating element method.

24
00:01:48,300 --> 00:01:50,310
So we need to specify what we're creating.

25
00:01:50,310 --> 00:01:55,860
We want to create a dip and also console log the element as we're creating it so we can take a closer

26
00:01:55,860 --> 00:01:57,690
look at as it's being created.

27
00:01:57,960 --> 00:02:02,670
And you're going to notice at first we do have the div, but it's not anywhere on the page because we

28
00:02:02,670 --> 00:02:04,320
haven't added to the page yet.

29
00:02:04,540 --> 00:02:10,800
And then this div we've got all the same properties of any element object that we might have selected

30
00:02:10,920 --> 00:02:13,710
so we can update the style property to it.

31
00:02:14,100 --> 00:02:20,080
But we set a background color and we'll set the background color to be blue and when we refresh it.

32
00:02:20,100 --> 00:02:21,510
So now it's got style.

33
00:02:21,630 --> 00:02:26,130
You can set the divide as well and I'll call it new one.

34
00:02:26,130 --> 00:02:28,860
And as we refresh it, you see that element is being built.

35
00:02:29,010 --> 00:02:31,380
So it's just like any other element at this point.

36
00:02:31,530 --> 00:02:35,160
And we can do any of the manipulations that we've seen in the earlier lessons.

37
00:02:35,490 --> 00:02:42,810
So the other thing that we can do is we can do text content to add in some text within there and refresh.

38
00:02:42,990 --> 00:02:44,690
You see that the text gets added in.

39
00:02:44,850 --> 00:02:49,590
So we have an appended to the page yet, but we see the text gets added and now there is another way

40
00:02:49,590 --> 00:02:55,610
to add in additional content as well, and that's using the text node.

41
00:02:56,040 --> 00:03:02,750
So let's set up our text using the document object create text node.

42
00:03:02,760 --> 00:03:08,910
So this allows us to create brand new text that we can place inside of an element and the result will

43
00:03:08,910 --> 00:03:10,710
be the same thing for either one.

44
00:03:10,980 --> 00:03:13,500
So now all we need to do is place it inside.

45
00:03:13,740 --> 00:03:20,510
So we've got our div and we can use append child to append a child into that div.

46
00:03:20,520 --> 00:03:27,150
So using that text inside object and when we refresh it, we've got the text that's been placed within

47
00:03:27,150 --> 00:03:30,300
the div and the same way that we appended the child.

48
00:03:30,450 --> 00:03:35,940
We can also add it to the page where we can select the document body.

49
00:03:36,330 --> 00:03:41,220
So selecting documents and then the body object and then we've got all of the same methods that are

50
00:03:41,220 --> 00:03:41,730
available.

51
00:03:41,730 --> 00:03:46,440
So the same syntax append child and we can append that child.

52
00:03:46,650 --> 00:03:49,940
And you can see when I refresh it, that's been added.

53
00:03:50,130 --> 00:03:57,240
So any one of the updates, the manipulations that we've done before, you can do that as well.

54
00:03:57,270 --> 00:03:59,040
And you can see that it does take place.

55
00:03:59,290 --> 00:04:02,550
I'm also going to do font size to make it much, much bigger.

56
00:04:02,700 --> 00:04:05,400
But we do 45 five picks for the style.

57
00:04:05,760 --> 00:04:07,500
So we always need to include the style.

58
00:04:07,680 --> 00:04:08,880
So that's how we can add it.

59
00:04:09,060 --> 00:04:13,670
We can also select an existing element and add it before or after.

60
00:04:13,860 --> 00:04:20,400
So if we want to, for instance, after the each one, if we want to place it in that slot, we can

61
00:04:20,400 --> 00:04:25,530
select the each one, we can keep it within the each one or we can select it and add it afterwards.

62
00:04:25,890 --> 00:04:30,860
So let's select the each one again using documents and query selector.

63
00:04:30,870 --> 00:04:32,730
There's only one element with each one.

64
00:04:33,030 --> 00:04:34,110
So we select that one.

65
00:04:34,410 --> 00:04:36,720
We also have an option to insert before.

66
00:04:36,720 --> 00:04:43,290
So the syntax is the same and then we've got an option to insert before and we need to select the new

67
00:04:43,290 --> 00:04:44,760
element that we've just created.

68
00:04:44,760 --> 00:04:49,640
So that's that div and then the element that we want to insert it before, which is the each one.

69
00:04:49,860 --> 00:04:57,450
So when we refresh, you see now we've inserted it before the H1 and when we inspect you can see there's

70
00:04:57,450 --> 00:04:59,910
that div that we've created and this is actually going.

71
00:04:59,990 --> 00:05:04,940
Be the same thing as if we append the body because we're going to send it to the body, actually the

72
00:05:04,940 --> 00:05:06,440
body is going to be at the end.

73
00:05:06,440 --> 00:05:10,130
So there is a difference before we append it to the body.

74
00:05:10,410 --> 00:05:15,980
You can see that once it's appended to the body for the HTML, it's right down at the bottom just before

75
00:05:15,980 --> 00:05:16,840
the body closes.

76
00:05:17,000 --> 00:05:20,750
So it takes all of the code and including the script tags.

77
00:05:20,750 --> 00:05:27,740
And when you append child, what it does is it adds that after all of the content inside of the element

78
00:05:27,740 --> 00:05:28,580
that you've selected.

79
00:05:28,820 --> 00:05:34,850
So we do have a challenge for you for this lesson, and that's to create a new element, give it an

80
00:05:34,850 --> 00:05:42,830
idea of test, and then add the content of hello world and then add the my ID element to the page.

81
00:05:43,520 --> 00:05:47,600
You can pause the video, try it out and I'll walk you through the solution coming up.

82
00:05:47,600 --> 00:05:51,530
And the syntax is going to be relatively similar to what we've already worked through.

83
00:05:51,860 --> 00:05:56,120
So let's open up our editor and first we'll create our element.

84
00:05:56,120 --> 00:05:58,760
And the element that we're creating is going to be a div.

85
00:05:58,940 --> 00:06:00,860
You can single code or double code this.

86
00:06:01,430 --> 00:06:06,110
And then once we've got it as an object, we can add to the classes.

87
00:06:06,650 --> 00:06:11,710
So I believe we do have a class of red, so we'll add that into the class list.

88
00:06:12,110 --> 00:06:18,020
We can also assign it an ID and the ID that we're assigning is going to be test.

89
00:06:18,200 --> 00:06:24,380
And then we also can add in some text content into there so we can specify text content and this one

90
00:06:24,380 --> 00:06:31,090
can say Hello World, as well as an earlier example, and then we can console log out our example.

91
00:06:31,730 --> 00:06:37,280
So as we're building it and go into the console, you can see there's that new element that we're creating.

92
00:06:37,520 --> 00:06:44,810
We can also create a text node so we can call it temp text and using documents, create text node.

93
00:06:45,170 --> 00:06:48,410
And then we need to specify the text content that we wanted to add in.

94
00:06:48,710 --> 00:06:50,360
So do Hello World two.

95
00:06:50,750 --> 00:06:57,140
And then we're selecting that element that we've named temp and appending a child and appending the

96
00:06:57,140 --> 00:06:58,250
temp text to it.

97
00:06:58,490 --> 00:07:03,440
We can also console log out temp as well so we can see how it's coming along.

98
00:07:03,800 --> 00:07:08,180
And the other thing, too, to note here as well is because this is an object.

99
00:07:08,180 --> 00:07:09,950
So it's referencing the one instance.

100
00:07:10,160 --> 00:07:15,740
And that's why even though we're Consolmagno temp over here and then we're logging it out again over

101
00:07:15,740 --> 00:07:22,820
here after the manipulation, we still see this update within that object because of the fact that it's

102
00:07:22,820 --> 00:07:24,230
referring to the same instance.

103
00:07:24,350 --> 00:07:27,790
And then lastly, let's select the element.

104
00:07:27,800 --> 00:07:34,100
So using documents and query selector selecting the element with my ID and this is where we need to

105
00:07:34,100 --> 00:07:35,210
upend the child.

106
00:07:35,690 --> 00:07:41,990
So we've got that as an object and now we can append child and the child that we want it to add in is

107
00:07:41,990 --> 00:07:43,920
that newly created element.

108
00:07:44,720 --> 00:07:47,420
So now we see we've added it in over here.

109
00:07:47,520 --> 00:07:49,060
Another thing to note as well.

110
00:07:49,070 --> 00:07:56,690
So once we've got some text content and even if we create text node adding in additional text, it simply

111
00:07:56,690 --> 00:07:57,710
adds it in there.

112
00:07:57,890 --> 00:08:05,030
And if you go and if you look at the source of that element, you can see that the source added them

113
00:08:05,030 --> 00:08:06,470
in in the same format.

114
00:08:06,480 --> 00:08:13,340
So if we wanted to add in even more text content and if we do the text content and after we've added

115
00:08:13,340 --> 00:08:15,830
it in the order does matter.

116
00:08:15,860 --> 00:08:20,810
So that's important to note as well, that we're going to be overriding the existing text even though

117
00:08:20,810 --> 00:08:21,730
we're a pending child.

118
00:08:21,740 --> 00:08:28,280
So if we were to take this and add this in below, we can refresh and you can see now we only get hello

119
00:08:28,310 --> 00:08:28,670
world.

120
00:08:28,800 --> 00:08:35,060
So also keep that in mind that the order does matter when you're applying multiple properties to the

121
00:08:35,060 --> 00:08:36,080
element that you're creating.