WEBVTT 00:00:06.820 --> 00:00:10.130 OK so now we're going to try something else. 00:00:10.170 --> 00:00:15.400 We're going to see how to add text to an existing simple elements. 00:00:15.900 --> 00:00:21.000 So we have done so far we have changed contents we have changed attributes and now we're going to add 00:00:21.050 --> 00:00:22.060 text. 00:00:22.440 --> 00:00:23.150 OK. 00:00:23.340 --> 00:00:29.670 There are several ways of adding sex we can add text at the end of a elements we can add text at the 00:00:29.670 --> 00:00:37.930 beginning of the elements and also we can text in the middle right after another and if it's ok we can 00:00:38.060 --> 00:00:45.230 create a button and we want to add some text at the end of the Microsoft Steve. 00:00:45.300 --> 00:00:50.510 OK so once we click on that's button we're going to see some text coming up right after the link. 00:00:50.720 --> 00:00:51.640 OK. 00:00:52.020 --> 00:00:55.940 So first let's create start button and duplicate that. 00:00:56.160 --> 00:01:02.800 And let's give it an I.D. example of the text. 00:01:03.740 --> 00:01:06.200 OK. 00:01:06.630 --> 00:01:10.560 And it's put some text the text. 00:01:10.690 --> 00:01:11.570 All right. 00:01:11.880 --> 00:01:19.610 Now we you know write some code so that we can access the button and say in the event of clicking on 00:01:19.610 --> 00:01:23.640 the button add some text at the end of the Dave. 00:01:24.000 --> 00:01:29.250 So this access the person first. 00:01:30.210 --> 00:01:36.910 OK we're going to use the idea of the button odd text. 00:01:37.020 --> 00:01:46.890 The event is click there we baroness's be putting everything there then we need the function then within 00:01:46.890 --> 00:01:49.740 the code of the connection between the curly brackets. 00:01:50.670 --> 00:01:55.960 So now we going to access the Microsoft Steve OK. 00:01:56.100 --> 00:02:01.920 Using the ID of the day. 00:02:05.820 --> 00:02:13.480 So Microsoft and the function are going to be using our text of the end of the day is called append 00:02:13.520 --> 00:02:14.880 . 00:02:14.940 --> 00:02:19.540 So what this function is doing is going to be taking a barometer. 00:02:20.690 --> 00:02:21.760 OK. 00:02:21.950 --> 00:02:28.530 And whatever we are putting inside the strings is going to add a simple code to the Microsoft Steve 00:02:28.540 --> 00:02:28.850 . 00:02:29.040 --> 00:02:33.910 So let's try something let's try to add a list and an ordered list. 00:02:34.860 --> 00:02:39.810 So for example let's have some 00:02:43.500 --> 00:02:54.290 list items some comics for example BMW. 00:02:54.610 --> 00:02:54.960 The 00:02:58.010 --> 00:03:02.630 CDS is OK. 00:03:02.880 --> 00:03:05.520 We need the ID of Microsoft. 00:03:05.820 --> 00:03:10.050 But the I.D. of the person is text without number sign. 00:03:10.050 --> 00:03:16.650 So now if we try again it's supposed to work and we can see that when we click on the button that's 00:03:16.650 --> 00:03:20.220 the order list is added to the end of the day. 00:03:20.280 --> 00:03:24.390 And we click again we're adding another new release. 00:03:24.390 --> 00:03:36.610 So you can avoid this overflowing of the text by changing the heights of the green box to auto case 00:03:36.870 --> 00:03:37.050 . 00:03:37.220 --> 00:03:42.460 And I try again and see that's one of the techs. 00:03:43.230 --> 00:03:44.750 You can see what looks better. 00:03:44.760 --> 00:03:57.910 Also we can move the buttons to the top so that it looks better. 00:03:58.170 --> 00:04:02.270 It's Have all the buttons just before the Facebook Dave. 00:04:03.380 --> 00:04:04.280 OK. 00:04:05.030 --> 00:04:07.420 Let's refresh now. 00:04:07.490 --> 00:04:15.100 If you are some text there you can see the list being added to the end of the Microsoft stuff. 00:04:15.360 --> 00:04:15.860 OK. 00:04:16.230 --> 00:04:17.130 So now we can. 00:04:17.220 --> 00:04:18.590 We're going to try something else. 00:04:18.600 --> 00:04:24.710 So let's see if we want to add the same list to the beginning of the day. 00:04:24.960 --> 00:04:26.750 So there would be a small change. 00:04:26.750 --> 00:04:33.180 So rather than using the append method so we can use the prepend method. 00:04:33.180 --> 00:04:40.490 So let's just Commines this and just copy the code changes to prepend. 00:04:40.940 --> 00:04:42.830 And if you try it again. 00:04:42.870 --> 00:04:47.370 So now the other list is added at the beginning of it. 00:04:47.880 --> 00:04:48.780 All right. 00:04:48.780 --> 00:04:58.740 Also we can odd the unordered lists right after a certain elements or right before a certain elements 00:04:58.740 --> 00:04:59.160 . 00:04:59.160 --> 00:05:06.590 So let's let's say we want to add the in our list right after the Microsoft paragraph. 00:05:06.720 --> 00:05:08.050 This paragraph here. 00:05:08.160 --> 00:05:11.530 First of all let's give it an ID. 00:05:11.850 --> 00:05:19.090 So if you go to that paragraph give us an idea and call it Microsoft paragraph 00:05:22.050 --> 00:05:22.830 and 00:05:27.710 --> 00:05:36.650 actually we don't need this so we can we can comment only the statements. 00:05:36.670 --> 00:05:37.470 OK let's keep 00:05:41.310 --> 00:05:42.220 coming though. 00:05:42.480 --> 00:05:44.070 Let's just Commines these two statements. 00:05:44.070 --> 00:05:44.940 Well no. 00:05:45.100 --> 00:05:46.880 To avoid any mistakes. 00:05:47.220 --> 00:05:54.820 No we're going to write some other statements so we're going to access the Microsoft paragraph 00:05:58.330 --> 00:06:02.090 OK. 00:06:02.670 --> 00:06:07.970 And then we're going to use another method It's called after. 00:06:08.350 --> 00:06:09.240 OK. 00:06:09.630 --> 00:06:20.640 And we're going to put the ASML code inside the quotes so let's add a paragraph let's just put some 00:06:20.640 --> 00:06:21.750 text then your paragraph 00:06:24.660 --> 00:06:30.420 in it to use the ID or paragraph using the number line. 00:06:30.620 --> 00:06:31.200 OK. 00:06:31.230 --> 00:06:32.470 Let's not forget that. 00:06:32.550 --> 00:06:38.280 Now if you click on the button we can see that we are adding the new paragraph just after the Microsoft 00:06:38.280 --> 00:06:43.050 stuff and we can do the same thing if we want to add a paragraph just before the microwave. 00:06:43.200 --> 00:06:46.100 So rather than use it after we can use before. 00:06:46.100 --> 00:06:47.080 All right. 00:06:47.520 --> 00:06:57.960 So this how we change e-mail content and add attributes in next video you learn how to change styling 00:06:58.110 --> 00:06:59.040 using Jay Querrey