1
00:00:02,330 --> 00:00:07,880
So now we have an understanding of how you select elements with different selection methods,

2
00:00:07,880 --> 00:00:11,540
most importantly get element by ID and query selector,

3
00:00:11,540 --> 00:00:17,090
we have an understanding of how you traverse the DOM based on an element which you selected with parent

4
00:00:17,120 --> 00:00:18,520
node and so on,

5
00:00:18,590 --> 00:00:25,370
we have an understanding of how you can read values from a DOM element and how you can manipulate DOM

6
00:00:25,370 --> 00:00:27,240
nodes or DOM elements,

7
00:00:27,260 --> 00:00:33,710
now let's have a look at how you can create and insert brand new elements because that's something we

8
00:00:33,710 --> 00:00:35,990
haven't really covered thus far.

9
00:00:35,990 --> 00:00:40,730
Now for that, we have basically two different ways of doing that - 

10
00:00:40,940 --> 00:00:47,990
we can and that might sound surprising but we can write some HTML code in Javascript and tell Javascript

11
00:00:47,990 --> 00:00:53,870
and therefore the browser that it should take and parse this HTML code and render it in a certain

12
00:00:53,870 --> 00:01:02,090
place of our documentary in the end or we use the create element method on the document object to create

13
00:01:02,120 --> 00:01:07,190
a brand new node and manually then insert it somewhere in our document.

14
00:01:07,250 --> 00:01:13,700
Now the HTML string can be added with the innerHTML property which you find on element nodes

15
00:01:14,210 --> 00:01:22,160
and that indeed adds and renders an HTML string, so some HTML code in that place where you add it.

16
00:01:22,160 --> 00:01:29,570
Alternatively, you also have insert adjacent HTML, a method you can use if you want to add some rendered

17
00:01:29,600 --> 00:01:35,210
HTML content next to existing content instead of replacing that content with it,

18
00:01:35,210 --> 00:01:41,750
so that's also supported or as I said, use create element to create single DOM element nodes instead

19
00:01:41,750 --> 00:01:49,670
of a bunch of HTML at once. Such created elements or element nodes can be added with append child or

20
00:01:49,670 --> 00:01:53,510
append and I'll come back to the difference throughout the next lectures,

21
00:01:53,510 --> 00:01:59,850
so this appends such a new DOM element or node inside of another, the new parent element or node

22
00:01:59,890 --> 00:02:08,330
then. You also have prepend, before, after, insert before and so on to be more specific where you want to

23
00:02:08,330 --> 00:02:12,160
add it, instead of adding it at the end of the existing child node list,

24
00:02:12,170 --> 00:02:14,260
you can add it in front of it and so on,

25
00:02:14,690 --> 00:02:20,600
so that can help you be more specific about the position where it should be added and you can also replace

26
00:02:20,600 --> 00:02:24,950
an existing node with that, with replace child or replace with, 

27
00:02:24,950 --> 00:02:31,040
that's also possible and allows you to basically remove an existing element and replace it with a

28
00:02:31,040 --> 00:02:32,300
new one.

29
00:02:32,330 --> 00:02:35,690
So these are different ways of manipulating the document,

30
00:02:35,690 --> 00:02:39,770
let's now have a look at them and understand their differences and when to use which.