1
00:00:00,640 --> 00:00:05,800
So far, we've only read values and changed
the elements on our page with JavaScript.

2
00:00:05,800 --> 00:00:08,669
Now you're going to begin learning
how to create new elements and

3
00:00:08,669 --> 00:00:09,620
add them to the page.

4
00:00:10,640 --> 00:00:13,585
For instance, in a todo list application,

5
00:00:13,585 --> 00:00:17,180
a user needs a way to add
a todo item to the list.

6
00:00:17,180 --> 00:00:20,891
This action requires that we provide
a way to add a node to the DOM,

7
00:00:20,891 --> 00:00:23,800
like the node representing a list item.

8
00:00:23,800 --> 00:00:28,450
There are various ways you might add
elements to the DOM with JavaScript.

9
00:00:28,450 --> 00:00:33,044
For example, you learned that setting
an element's innerHTML property to

10
00:00:33,044 --> 00:00:38,600
a string containing HTML tags, sets
the markup to display within the element.

11
00:00:38,600 --> 00:00:42,807
But that property replaces all the
existing contents of the element with just

12
00:00:42,807 --> 00:00:44,390
the new content.

13
00:00:44,390 --> 00:00:47,200
What if you need to preserve
the original markup?

14
00:00:47,200 --> 00:00:48,806
It's common to append or

15
00:00:48,806 --> 00:00:53,920
add newly created elements alongside
existing sibling elements.

16
00:00:53,920 --> 00:01:00,029
For example, a simple to do list might be
an unordered list containing list items,

17
00:01:00,029 --> 00:01:01,787
displaying each todo.

18
00:01:01,787 --> 00:01:06,242
As you enter new todos,
new list items get created and

19
00:01:06,242 --> 00:01:09,715
added to the beginning or end of the list.

20
00:01:09,715 --> 00:01:15,250
First, I'll teach you how to create a new
element with document.createElement.

21
00:01:15,250 --> 00:01:19,000
Then later you'll learn how to insert
a newly created element into the DOM.

22
00:01:20,150 --> 00:01:21,526
Back in our project,

23
00:01:21,526 --> 00:01:27,050
let's add a feature that allows users to
add new items to the daily task list.

24
00:01:27,050 --> 00:01:32,028
We'll update our code to let users type
a new task into this text input then click

25
00:01:32,028 --> 00:01:35,989
the button to create the new task and
make it appear in the list.

26
00:01:35,989 --> 00:01:38,300
In the index.html file,

27
00:01:38,300 --> 00:01:43,768
let's start by changing the header
button's text to add task.

28
00:01:46,870 --> 00:01:51,970
I'll save my file and
over in app.js, I'm also going to

29
00:01:51,970 --> 00:01:56,872
update the button update
variable name to btnCreate.

30
00:01:56,872 --> 00:02:00,479
A more meaningful name indicating
that the purpose of the button

31
00:02:00,479 --> 00:02:04,160
assigned to this variable
is to create an element.

32
00:02:04,160 --> 00:02:07,470
Next I need to update my event
listener with the new variable name.

33
00:02:10,090 --> 00:02:13,872
And now I'm going to delete the headline
variable from this function and

34
00:02:13,872 --> 00:02:15,981
the two lines of code that reference it,

35
00:02:15,981 --> 00:02:19,570
because we're no longer going
to be updating the headline.

36
00:02:19,570 --> 00:02:24,190
That was just a simple demo to help
introduce the concept of DOM manipulation.

37
00:02:24,190 --> 00:02:26,040
Now we're gonna take things up a notch.

38
00:02:26,040 --> 00:02:27,316
Again, you can access and

39
00:02:27,316 --> 00:02:31,100
review all the code written in this
course by downloading the project files.

40
00:02:32,670 --> 00:02:34,110
Within this function,

41
00:02:34,110 --> 00:02:39,150
we'll create a new list item element
with the createElement method.

42
00:02:39,150 --> 00:02:42,850
First, I'll declare a variable named item.

43
00:02:42,850 --> 00:02:46,144
Then assign it the newly
created element with

44
00:02:46,144 --> 00:02:50,660
document.createElement followed
by a set of parentheses.

45
00:02:51,850 --> 00:02:55,951
To create a new element,
pass document.createElement

46
00:02:55,951 --> 00:03:01,450
the tag name of the HTML element you want to
create as a string, in this case, li.

47
00:03:02,730 --> 00:03:08,317
I'll quickly demonstrate how this method
works by copying this declaration and

48
00:03:08,317 --> 00:03:11,120
pasting it here in the browser console.

49
00:03:11,120 --> 00:03:17,882
Then on the next line type item, and
we see that it returns a set of li tags.

50
00:03:17,882 --> 00:03:19,941
Once the element gets created,

51
00:03:19,941 --> 00:03:23,842
we can set the text inside it
with the textContent property.

52
00:03:23,842 --> 00:03:28,518
The list item's text content should be
the value entered into the text input.

53
00:03:31,165 --> 00:03:33,122
So back in our function,

54
00:03:33,122 --> 00:03:36,940
let's assign item.textContent

55
00:03:36,940 --> 00:03:41,870
the value of the text
field with input.value.

56
00:03:44,170 --> 00:03:50,076
I'll save my file. Then back in the browser, refresh and

57
00:03:50,076 --> 00:03:56,510
enter some text, and
click "Add task". Nothing happens.

58
00:03:56,510 --> 00:04:00,036
That's because even though
we've created the element,

59
00:04:00,036 --> 00:04:02,430
we haven't added it to the DOM yet.

60
00:04:02,430 --> 00:04:05,895
Right now we're creating free-floating
elements that exist only in memory

61
00:04:05,895 --> 00:04:06,500
somewhere.

62
00:04:09,410 --> 00:04:13,365
For example here in the event listener,

63
00:04:13,365 --> 00:04:18,680
I'll log the value of the item
variable to the console.

64
00:04:18,680 --> 00:04:25,470
I'll once again, enter some text into
the field and click the button.

65
00:04:25,470 --> 00:04:29,603
This time the console outputs the newly
created list item with the text

66
00:04:29,603 --> 00:04:31,340
"Read a book".

67
00:04:31,340 --> 00:04:34,290
Up next, you'll learn how to
insert this content into the DOM.