1 00:00:00,450 --> 00:00:05,880 Hey, in this lesson, we're going to be doing some inserting and creating some elements, so using 2 00:00:05,880 --> 00:00:12,600 the insert before, it's a method that inserts a node before the reference node as a child of the specified 3 00:00:12,600 --> 00:00:13,380 parent node. 4 00:00:13,680 --> 00:00:17,790 So what that means is that we can insert a node before another node. 5 00:00:18,000 --> 00:00:22,640 So going into the script, we're going to make a selection of an element. 6 00:00:22,650 --> 00:00:24,830 We're actually going to create a brand new element. 7 00:00:25,170 --> 00:00:26,220 So a creator. 8 00:00:26,640 --> 00:00:28,050 Call it div one. 9 00:00:28,290 --> 00:00:32,100 And then using the document to create create elements. 10 00:00:33,000 --> 00:00:34,410 Let's create a div. 11 00:00:36,830 --> 00:00:43,940 So this is a divide that we've created and I'll just like it out into the console so that we can track 12 00:00:43,940 --> 00:00:45,290 the creation process. 13 00:00:45,620 --> 00:00:47,150 So right now it's just a blank div. 14 00:00:47,300 --> 00:00:51,640 It's not sitting anywhere within the HTML yet because we haven't inserted anywhere. 15 00:00:52,100 --> 00:00:58,220 So now we can grab a reference and make a selection of the elements. 16 00:00:58,370 --> 00:01:06,050 So if we want it to select the elements with a class of nested and let's say we want to insert it before 17 00:01:06,050 --> 00:01:11,780 nested one, so let's take our selection and I'll just call it next one. 18 00:01:12,170 --> 00:01:19,350 And using document query selector, we're going to select the element with a class of nested. 19 00:01:20,030 --> 00:01:24,680 And in this case, it's only going to be selecting all of the first elements. 20 00:01:25,280 --> 00:01:31,370 So what's going to happen here is it's going to select the first one with a class of nested and we can 21 00:01:31,370 --> 00:01:37,210 see which one it selects again, going onto the console and doing a console log of next one. 22 00:01:37,460 --> 00:01:40,040 So it's selecting that first element on the page. 23 00:01:40,290 --> 00:01:43,900 Let's make the page a little bit bigger, so zoom in on the page. 24 00:01:44,150 --> 00:01:47,690 So when we make a selection, it's selecting that first element. 25 00:01:47,720 --> 00:01:54,110 So now we've got that first element assigned to an object, next one, and we can retrieve back the 26 00:01:54,110 --> 00:02:01,100 parent node of next one by using some traversing and selecting the parent node. 27 00:02:01,340 --> 00:02:06,830 And we can also take a look at what the gets returned back with the parent element as well. 28 00:02:09,200 --> 00:02:13,340 So it's going to return back to the element and that's going to return back to the node, and in this 29 00:02:13,340 --> 00:02:15,050 case, they're going to be both the same. 30 00:02:15,090 --> 00:02:21,740 So they're going to be referencing that same device that contains all of the nested elements that are 31 00:02:21,740 --> 00:02:22,350 within them. 32 00:02:23,000 --> 00:02:28,520 So now we can insert before and let's set up the parent. 33 00:02:30,350 --> 00:02:37,580 Elements and selecting the parent node, so next one, the parent node, and that's well, we could 34 00:02:37,580 --> 00:02:39,530 also selected by class as well. 35 00:02:39,830 --> 00:02:41,270 That's another option that we have. 36 00:02:41,780 --> 00:02:45,580 And if we want to insert that element that we just created. 37 00:02:45,920 --> 00:02:48,470 So let's go ahead and we're going to insert that element. 38 00:02:49,100 --> 00:02:56,960 So the parent elements and then using the insert before let's select insert div one and then we need 39 00:02:56,960 --> 00:03:00,600 to specify what element it's going to be inserted before. 40 00:03:00,890 --> 00:03:02,450 So let's do the next one. 41 00:03:03,960 --> 00:03:07,650 And selection, so now the Divx is inserted on the page. 42 00:03:10,070 --> 00:03:16,430 And if we go into the device, we see that that new device has been inserted, we don't have any text 43 00:03:16,430 --> 00:03:16,940 within it. 44 00:03:17,180 --> 00:03:22,420 So let's go ahead and create some text and add that in and we'll set the text content. 45 00:03:22,430 --> 00:03:26,330 We could also add it by node and we'll just call it first nested. 46 00:03:26,840 --> 00:03:34,670 So there we see that it's been inserted just before that first div and we've got first nested inserted 47 00:03:34,670 --> 00:03:35,030 there. 48 00:03:35,300 --> 00:03:37,070 So we needed some parameters. 49 00:03:37,070 --> 00:03:40,850 We needed where the parent we needed to identify the parent. 50 00:03:41,130 --> 00:03:43,880 We also needed to identify what we're inserting. 51 00:03:44,030 --> 00:03:50,480 And then also we needed to identify where it's inserted before because we are using the insert before 52 00:03:50,660 --> 00:03:51,170 method. 53 00:03:51,320 --> 00:03:53,270 So we did need all of these parameters. 54 00:03:53,420 --> 00:03:55,220 So this is the referencing node. 55 00:03:55,430 --> 00:04:00,470 So let's also make a selection and we're going to select the second nested element. 56 00:04:00,500 --> 00:04:05,560 So just give these ones different classes and selecting next to. 57 00:04:05,810 --> 00:04:13,690 So what do you think is going to happen if we select nested two and then insert before next to. 58 00:04:13,970 --> 00:04:16,960 So where do you think that this element is going to go? 59 00:04:16,970 --> 00:04:23,360 And I'm also going to apply a style and let's set the color to be red so it stands out a little bit 60 00:04:23,360 --> 00:04:23,600 more. 61 00:04:24,820 --> 00:04:32,390 So let's refresh and if you said that it's going to insert it before nested to, then you're correct. 62 00:04:32,410 --> 00:04:38,320 So that's where it's inserted that once where we've made the selection of nested one and nested two. 63 00:04:38,320 --> 00:04:45,860 And actually, I should update those classes because I've got the nested two and I've got nested one. 64 00:04:45,880 --> 00:04:48,060 So it's a little bit confusing there. 65 00:04:48,280 --> 00:04:56,620 So let's select and update this to two and to three and then now it's going to insert it between one 66 00:04:56,620 --> 00:04:57,400 and two. 67 00:04:57,910 --> 00:05:01,680 So it's refresh and it's inserting the content between one and two. 68 00:05:02,290 --> 00:05:04,590 So there's also insert after. 69 00:05:04,600 --> 00:05:11,260 So let's make a selection of this instead of insert before we're going to do insert after and we're 70 00:05:11,260 --> 00:05:12,760 going to use that same div. 71 00:05:12,940 --> 00:05:14,700 So what do you think is going to happen here? 72 00:05:14,800 --> 00:05:18,660 Where do you think that the first nested element is going to be sitting? 73 00:05:18,880 --> 00:05:22,820 We're inserting it before Nesto and now we're inserting it after Anasta. 74 00:05:23,470 --> 00:05:29,380 So if you said that we're going to throw an error, then you're correct, because insert after is not 75 00:05:29,380 --> 00:05:30,370 actually a function. 76 00:05:30,790 --> 00:05:38,260 But that's OK, because we can actually fix that so we can use actually insert before, but we need 77 00:05:38,260 --> 00:05:40,540 to navigate to the next sibling. 78 00:05:40,690 --> 00:05:48,360 So selecting the element of next to and taking the next sibling value of that. 79 00:05:48,370 --> 00:05:50,380 So it's going to move it over to the next element. 80 00:05:50,650 --> 00:05:58,390 And I'll actually console logout that values or console log so that we can see what that looks like 81 00:05:58,390 --> 00:05:59,290 within the console. 82 00:05:59,320 --> 00:06:01,690 So which one we're moving and navigating to. 83 00:06:01,990 --> 00:06:03,940 And once we do that, then. 84 00:06:06,100 --> 00:06:10,780 We can indeed insert after because now it's moving over to the. 85 00:06:11,980 --> 00:06:21,070 Third item in the list, and that's how you can add in the ability to do insert after using insert before, 86 00:06:21,070 --> 00:06:22,920 so there's no method again for that. 87 00:06:23,170 --> 00:06:29,010 You can also apply different prototypes to those so we can select the element. 88 00:06:29,320 --> 00:06:36,100 And this is going to represent the entire element, setting up an element prototype and let's do an 89 00:06:36,100 --> 00:06:38,350 append before. 90 00:06:38,500 --> 00:06:41,770 So we're going to create a function that's happened before. 91 00:06:41,980 --> 00:06:51,970 So give the function taking in the element and it's going to take the elements and parent node and then 92 00:06:51,970 --> 00:06:57,280 using insert before it's going to take whatever this element is. 93 00:06:57,550 --> 00:06:59,620 And the element that was Pastan. 94 00:06:59,890 --> 00:07:04,540 So taking in the parent and whatever the element that was passed in. 95 00:07:05,650 --> 00:07:13,330 And also let's do a prototype for element, prototype and append after. 96 00:07:14,220 --> 00:07:19,130 So that's if we want these functions, we can always create the prototypes for them. 97 00:07:20,080 --> 00:07:23,310 So this just a quick example of how to create prototypes. 98 00:07:23,620 --> 00:07:33,820 So take the element and move to the parent node and then using the insert before, as we saw that there 99 00:07:33,820 --> 00:07:35,470 is no insert after that. 100 00:07:35,470 --> 00:07:36,400 So we need to create it. 101 00:07:36,670 --> 00:07:41,570 So we'll select the element that we want to insert. 102 00:07:41,590 --> 00:07:47,710 So using this to reference that element that we're inserting is the same as what we're doing with the 103 00:07:47,710 --> 00:07:57,470 div one and then we're selecting the elements and getting its next sibling in order to insert afterwards. 104 00:07:58,000 --> 00:08:02,670 So now we are ready to try the prototypes that we created. 105 00:08:03,370 --> 00:08:07,960 So selecting the elements that we've just created. 106 00:08:09,750 --> 00:08:18,270 So let's select this one, and this has been applied to all of the elements, and then now we can use 107 00:08:18,270 --> 00:08:25,500 append before and append after, so they're available for us and then we need to specify where we're 108 00:08:25,590 --> 00:08:26,660 spending it after. 109 00:08:26,940 --> 00:08:30,030 So we've already got that selected. 110 00:08:33,500 --> 00:08:40,220 And I'm going to create one more element so that we can demo both of them at the same time and I'll 111 00:08:40,220 --> 00:08:48,970 call it second nested, and then this one can have a color of blue and give it to div two and this way. 112 00:08:49,700 --> 00:09:01,250 So just as we appended after, let's append before and using div two up are prototypes so that the top. 113 00:09:02,510 --> 00:09:09,980 And that way they work, so we've apprehended second and first and actually let's swap those around 114 00:09:10,190 --> 00:09:17,330 so that we're spending first and second, so first and second and we'll swap those around. 115 00:09:18,920 --> 00:09:20,570 So two to one. 116 00:09:21,140 --> 00:09:23,780 And that's how you can set up prototypes to append. 117 00:09:25,850 --> 00:09:28,170 Content before and after. 118 00:09:28,460 --> 00:09:33,380 So an upcoming lesson, we're going to look at some more options to append and prepend with JavaScript.