WEBVTT

0
00:00.870 --> 00:08.400
Now while our web site is live and running we can actually use jQuery to

1
00:08.550 --> 00:11.250
add new elements on the fly. Now

2
00:11.250 --> 00:20.340
for example if I selected my h1 and I decided to add a new button before the h1, then I simply use

3
00:20.430 --> 00:22.350
the before method.

4
00:22.350 --> 00:29.330
And inside these parentheses I can put down the HTML that I want to add before our h1.

5
00:29.370 --> 00:36.010
So let's create a button that simply says New, and let's create the closing tag.

6
00:36.060 --> 00:43.500
And now if I hit enter you can see that we've created a brand new button on our web page without changing

7
00:43.530 --> 00:46.620
any of our HTML code inside Atom.

8
00:46.710 --> 00:50.820
So that means that we can create HTML elements at any time we wish

9
00:50.820 --> 00:55.070
just by using code. But there's actually a few ways that you can do this.

10
00:55.080 --> 00:58.920
So previously I showed you how you can use the before.

11
00:59.040 --> 01:06.210
Now there's also after which creates our HTML elements after the element that we've selected.

12
01:06.210 --> 01:10.140
So in this case it creates it here after h1.

13
01:10.140 --> 01:21.910
Now there's also prepend and append, and the difference between, say, prepend and before is that prepend 

14
01:21.950 --> 01:22.290
will 

15
01:22.340 --> 01:29.590
add your new HTML element into the item that you've selected just after the opening tag.

16
01:29.590 --> 01:38.560
So if you go ahead and inspect on this new button you can see that it's been added inside the h1, just

17
01:38.560 --> 01:40.130
before the word Hello.

18
01:40.210 --> 01:46.160
And the button that we appended got added just after the content of the h1,

19
01:46.270 --> 01:48.880
but before the end of the h1.

20
01:48.880 --> 01:57.760
So using before, after, prepend and append, we have a lot of control over where our newly created HTML 

21
01:57.760 --> 01:59.180
element is going to go.

22
01:59.500 --> 02:09.190
So just as a reminder the before method will add your new element before the opening tag of the selected

23
02:09.220 --> 02:09.800
element,

24
02:09.910 --> 02:18.700
so in this case it was our h1, and the after method will add it after the h1, but the prepend and append

25
02:18.790 --> 02:20.310
are a little bit special.

26
02:20.400 --> 02:29.380
They’ll add your element just before the content of the h1 and right after the opening tag, and append does

27
02:29.380 --> 02:36.580
the opposite where it gets added after the content of your h1 but still inside the h1 element.

28
02:36.730 --> 02:40.930
Now if you wanted to remove elements it's also really really simple.

29
02:40.930 --> 02:46.060
All you have to do is just use our dollar sign to select the elements that you want to remove.

30
02:46.060 --> 02:51.220
For example say if we wanted to get rid of all of our buttons then we can simply select all of them

31
02:51.310 --> 02:58.210
and say .remove, and that will get rid of all of the button elements inside our current web page.