1 00:00:00,530 --> 00:00:06,960 Guys in this video we're going to show you how we can create an element and then add things to it such 2 00:00:06,960 --> 00:00:09,630 as classes ID's attributes. 3 00:00:09,780 --> 00:00:13,090 We can create an element and then insert it into the dorm. 4 00:00:13,110 --> 00:00:13,460 OK. 5 00:00:13,470 --> 00:00:18,420 So what we're going to do is we're going to add an extra list item at the bottom here. 6 00:00:18,420 --> 00:00:23,060 It's going to include the text node list item or whatever we put for the text. 7 00:00:23,070 --> 00:00:26,880 It's also going to include the link right here with the icon. 8 00:00:27,150 --> 00:00:33,440 All right so we're going to go into our app Jay us and first thing we need to do is create the element. 9 00:00:33,450 --> 00:00:39,840 All right so in javascript we actually have document create element which will basically create an element 10 00:00:39,840 --> 00:00:45,120 from scratch so I'm going to create a variable called Ally said it to document Daut 11 00:00:47,890 --> 00:00:54,790 create element and the element that we want that we want to create is an ally. 12 00:00:54,970 --> 00:00:55,530 OK. 13 00:00:55,750 --> 00:00:57,480 So it's an ally element. 14 00:00:57,670 --> 00:01:00,750 And let's go ahead and add a class to this. 15 00:01:01,070 --> 00:01:05,200 I actually know what I'll do is Konsole don't log it down here so you can see exactly what it looks 16 00:01:05,200 --> 00:01:06,210 like. 17 00:01:06,220 --> 00:01:08,460 So right now it's just an ally. 18 00:01:08,830 --> 00:01:17,950 So if you want to add a class to it we can say allied Daut class name and we want to give it a class 19 00:01:17,950 --> 00:01:22,680 of collection item to match the rest of the allies. 20 00:01:22,690 --> 00:01:28,290 Now if we save that you'll see that now the ally has a class of collection item. 21 00:01:28,750 --> 00:01:32,730 If we wanted to add an ID which we don't have to these ones don't have IDs. 22 00:01:32,740 --> 00:01:43,570 But just to show you we can we can say Ally dog ID equals and we'll just call this new item and save 23 00:01:43,600 --> 00:01:50,380 and you can see it has an I.D. so we can construct DOM elements from scratch with Manela javascript. 24 00:01:50,380 --> 00:01:52,880 Now if we wanted to add an attribute. 25 00:01:53,900 --> 00:01:54,260 OK. 26 00:01:54,610 --> 00:01:59,140 Any attribute at all in this case will just add a title so we'll say l dot. 27 00:01:59,160 --> 00:02:03,860 Or else I dot set attribute. 28 00:02:04,520 --> 00:02:10,900 And let's say we want to add a title and the title will be new item and save. 29 00:02:10,900 --> 00:02:14,210 And I can see it has a title attribute of new item. 30 00:02:14,210 --> 00:02:14,530 All right. 31 00:02:14,530 --> 00:02:20,320 So you just constructed this element with all these attributes through javascript. 32 00:02:20,320 --> 00:02:23,320 All right so what we want to do now is we want to add a text node. 33 00:02:23,320 --> 00:02:33,880 So we want something inside of the ally so to do that say create text node well say create text mode 34 00:02:33,910 --> 00:02:35,250 and append. 35 00:02:35,500 --> 00:02:42,580 OK because we need to append it so we're going to say Ally Daut 10 shild OK a pen child just means you 36 00:02:42,580 --> 00:02:44,850 want to put something inside of something. 37 00:02:44,860 --> 00:02:48,980 So we want a pen in here and we want to append a text node. 38 00:02:49,000 --> 00:02:57,190 Now to create a text node we use document datt create text node. 39 00:02:58,660 --> 00:02:59,050 All right. 40 00:02:59,050 --> 00:03:03,450 And then here is the text we want to put which I'm just going to say hello world. 41 00:03:03,460 --> 00:03:09,760 Now if you want to you could put this inside of a variable right here and then put the variable inside 42 00:03:09,760 --> 00:03:10,180 of a pen. 43 00:03:10,180 --> 00:03:15,580 Child if you wanted to do that you could do that but let's save that now you can see that hello world 44 00:03:15,590 --> 00:03:18,030 is inside the light. 45 00:03:18,120 --> 00:03:18,500 All right. 46 00:03:18,500 --> 00:03:22,440 Now I'm going to I'm going to get to the Lenk afterwards. 47 00:03:22,510 --> 00:03:27,900 Right now I just want to put the list item Pawar we have in here. 48 00:03:28,180 --> 00:03:38,320 So to do that we're going to do let's say a pand ally as a child to you well. 49 00:03:38,410 --> 00:03:45,020 So we're going to say document Daut to do query selector. 50 00:03:45,700 --> 00:03:52,200 So query selector UL Thorold's are you Al dot collection as a class of collection. 51 00:03:52,450 --> 00:03:59,920 And then we're going to do dot append child again and we want to append the ally Sylhet save. 52 00:04:00,130 --> 00:04:04,380 And now you can see that we have a list item at the end here of hello world. 53 00:04:04,810 --> 00:04:05,240 OK. 54 00:04:05,260 --> 00:04:13,590 Now as it is there's no X. There's no link here we have to create that and append that to the list item. 55 00:04:13,600 --> 00:04:28,000 So let's go up see we'll go right here and let's say create new Lenk element so we'll create a variable 56 00:04:28,000 --> 00:04:30,070 called Lanc. 57 00:04:30,100 --> 00:04:37,210 Now notice I'm using Konst and it's fine because we're not we're not re assigning these variables. 58 00:04:37,240 --> 00:04:43,540 OK we're adding stuff to them like classes and IDs and stuff we're running methods and properties on 59 00:04:43,540 --> 00:04:43,890 them. 60 00:04:43,990 --> 00:04:48,000 But we're not actually read declaring it so it's fine to use Konst here. 61 00:04:48,400 --> 00:04:51,690 So let's say equals document Daut. 62 00:04:51,760 --> 00:04:59,150 Again we're going to create an element this time we're going to create and tag a link. 63 00:04:59,980 --> 00:05:08,620 Let's add the classes we need because if we look at the team now the link has a class of delete item 64 00:05:08,710 --> 00:05:10,600 and secondary contents. 65 00:05:10,600 --> 00:05:13,260 Let's go ahead and copy that. 66 00:05:13,510 --> 00:05:15,450 And we're going to put that down here. 67 00:05:15,510 --> 00:05:22,450 I see a link Daut class name equals and then paste that in. 68 00:05:22,450 --> 00:05:22,810 All right. 69 00:05:22,810 --> 00:05:27,470 And then if we look at the HTL again we just want to insert this. 70 00:05:27,480 --> 00:05:30,400 OK there's no text node inside this link. 71 00:05:30,430 --> 00:05:34,540 So what we'll do is just use inner h tim L to put this in. 72 00:05:34,660 --> 00:05:45,550 So we'll do is copy this and then we'll take let's say and I call an aged him now will say link Daut 73 00:05:45,720 --> 00:05:51,610 in our age to him equals and then we'll go ahead and paste that in. 74 00:05:52,240 --> 00:05:52,620 All right. 75 00:05:52,630 --> 00:06:01,580 Now all we need to do is append this link into the lie so we can simply say ally with a comment here. 76 00:06:01,900 --> 00:06:06,770 So append link into a lie. 77 00:06:07,090 --> 00:06:13,220 So what Ally and child put in link. 78 00:06:13,240 --> 00:06:14,710 All right so let's save it. 79 00:06:14,710 --> 00:06:17,370 And you can see we have our X.. 80 00:06:17,440 --> 00:06:17,700 All right. 81 00:06:17,710 --> 00:06:27,060 So we just inserted this list item with this icon link from javascript and now later on when we actually 82 00:06:27,060 --> 00:06:29,600 make this into a functional project. 83 00:06:29,760 --> 00:06:33,800 This is what we're going to do when we put something in here and we click submit. 84 00:06:33,960 --> 00:06:39,240 We're going to have an event fire off and we're actually going to add that to the list here. 85 00:06:39,240 --> 00:06:43,380 All right so this is stuff that you'll be doing in real world projects. 86 00:06:43,380 --> 00:06:43,710 All right. 87 00:06:43,710 --> 00:06:45,220 So thanks for watching guys. 88 00:06:45,220 --> 00:06:46,620 I will see you in the next few.