WEBVTT 00:01.140 --> 00:06.800 Using dumb manipulation, you are able to create new elements and then add those new elements to estimate 00:06.870 --> 00:10.620 document for doing that, we need to use some dumb methods. 00:11.850 --> 00:12.270 All right. 00:12.570 --> 00:14.920 Let's go to brackets at first. 00:14.940 --> 00:17.160 I'm going to create a new element. 00:17.160 --> 00:20.700 And for that, we need to use a method called create element. 00:21.180 --> 00:23.880 So write variable new elements. 00:26.070 --> 00:31.830 The mentioned method is a method of document object and therefore we need to attach it to document. 00:31.840 --> 00:34.650 So write document thoughts, create elements. 00:37.560 --> 00:43.620 And inside the parentheses, we need to indicate the name of art in this case, I'm going to create 00:43.660 --> 00:44.550 Butson Element. 00:44.580 --> 00:48.510 Therefore, we need to write it as I think the right button. 00:50.810 --> 00:57.890 OK, let's see what we actually have done right to your castle, but look, new element. 01:01.810 --> 01:09.400 That reload and you see that we have bottomed out, it's actually created, but it doesn't have a content 01:09.400 --> 01:15.370 yet, so in order to create content, we need to use another method, which is called creative text. 01:15.370 --> 01:18.670 Not so create another variable. 01:18.910 --> 01:21.760 VAR text equals 01:24.430 --> 01:26.980 document that creates text node. 01:30.320 --> 01:33.860 And he said the parentheses, I'm going to right click. 01:36.740 --> 01:41.180 Now, let's see in Castle what it looks like, right, Castle, but like text. 01:45.240 --> 01:47.920 Reload and we have text here. 01:48.990 --> 01:56.250 It looks like as a string value, but it's not actually a string, it's an object and an element is 01:56.250 --> 01:57.280 an object as well. 01:57.900 --> 02:04.080 So we have created button element and also text for that button, but they exist separately. 02:04.410 --> 02:08.030 And we need to add this text button for that. 02:08.040 --> 02:11.760 We need to use another method called upon child. 02:12.360 --> 02:18.930 So we need to write new elements dot upon child. 02:20.390 --> 02:25.740 And as a parameter, we need to insert the text note that we have just created. 02:26.180 --> 02:27.620 So right here, text. 02:29.380 --> 02:37.900 OK, let's see the result in cancel it first, get rid of this line and then place these cancel the 02:37.900 --> 02:38.590 log below. 02:41.540 --> 02:46.070 Reload and we have results that we actually wanted. 02:47.150 --> 02:52.670 OK, the element already exists, but only in JavaScript and not in the file. 02:53.420 --> 03:00.720 Let's go to index and choose the place where we want to add this button below. 03:00.740 --> 03:04.310 We have a four elements and I'm going to add button inside it. 03:05.480 --> 03:12.850 At first we need to select form elements and you see that it has an ID attribute and so let's use it, 03:14.120 --> 03:18.590 go back to script on JS file and create a variable for. 03:21.730 --> 03:24.910 Equals to document that got elements by ID. 03:28.160 --> 03:36.530 And indicate the idea of the four elements, right, and and now we need to use again upon child method, 03:36.530 --> 03:41.100 which adds the element as a last child in this case in the form element. 03:42.110 --> 03:47.630 So right for dot upon child and inside the parenthesis. 03:47.960 --> 03:48.330 Right. 03:48.660 --> 03:49.400 You are not. 03:52.070 --> 04:01.520 Then reload and here we go, our click button is added on the page, and also if we check the file, 04:03.050 --> 04:09.500 you will find that it's added to four elements as a last child. 04:11.900 --> 04:19.490 All right, you agree that it doesn't look good and let's use one of the methods in order to change 04:19.490 --> 04:20.040 the style. 04:20.360 --> 04:22.610 I'm going to use a set attribute method. 04:23.210 --> 04:32.120 So let's write a new element that set attribute, and I'm going to set this attribute. 04:33.660 --> 04:35.580 Right inside the parentheses, tiel. 04:37.530 --> 04:43.890 And then right here, some CSI styles by display block. 04:47.260 --> 04:49.210 Then right margin. 04:50.740 --> 05:01.090 On top and bottom kind of pixels and a photo on right and left, then use padding. 05:04.040 --> 05:13.300 Five pixels on top and bottom and top pixels also aren't going to change the background, color, right 05:13.310 --> 05:22.460 background property and change the background color right here Carol. 05:25.730 --> 05:32.900 And also the last one right here, color change the text color into white. 05:36.100 --> 05:39.310 Reload and you see that it looks better. 05:40.440 --> 05:45.220 OK, as we said up on child matter, that's the element as a lost child. 05:45.760 --> 05:48.900 And there is another method which is called insert before. 05:49.270 --> 05:53.660 And using this method, we are able to add the element at any specified place. 05:54.280 --> 05:58.820 In this case, I'm going to add new element as a first child, four form element. 05:58.840 --> 06:03.070 So right for that insert before. 06:06.850 --> 06:09.110 This method uses two parameters. 06:09.640 --> 06:19.930 First, one is a new element, the right new element, and as a second parameter, I want to indicate 06:20.620 --> 06:28.240 here form dot children and then insert the square brackets, indicate index number zero. 06:30.800 --> 06:41.780 It means that new elements will be placed before the first child element so remote and you see that 06:41.780 --> 06:46.990 a button has changed its place and we have it above other input elements. 06:48.170 --> 06:59.220 Again, you can go to extremophile and you will see that button is placed as a first child for the form 06:59.250 --> 06:59.630 element. 07:01.850 --> 07:02.320 All right. 07:03.470 --> 07:09.350 The last thing that I'm going to show you is how to remove the elements from extremophile using JavaScript 07:09.800 --> 07:12.110 so that we need to use remote child method. 07:12.110 --> 07:17.410 And in order to remove the elements, first of all, you need to access on its parents. 07:19.160 --> 07:22.910 I'm going to remove new elements that we have created. 07:23.150 --> 07:29.290 So write new elements that parent elements. 07:30.470 --> 07:34.390 So we have access on a form element, which is the parent of new element. 07:34.730 --> 07:37.640 And now we can use or remove child method, right. 07:37.640 --> 07:42.020 Dot remote child and inside the parentheses. 07:42.020 --> 07:44.720 Right as a parameter new element. 07:48.610 --> 07:52.550 Reload the page and you see that click button is gone. 07:54.850 --> 08:02.640 Check again the e-mail file and you will find that it's removed from the original file as well. 08:05.160 --> 08:11.310 It's kind of strange, but without using Perrottet element, we cannot remove the element. 08:13.460 --> 08:20.740 All right, so in this lecture, you have learned how to create, add and remove elements using dumb. 08:21.950 --> 08:22.640 Let's move on.