All language subtitles for 183 Adding and Removing Elements with jQuery.en_US

Now while our web site is live and running we can actually use jQuery to

add new elements on the fly. Now

for example if I selected my h1 and I decided to add a new button before the h1, then I simply use

the before method.

And inside these parentheses I can put down the HTML that I want to add before our h1.

So let's create a button that simply says New, and let's create the closing tag.

And now if I hit enter you can see that we've created a brand new button on our web page without changing

any of our HTML code inside Atom.

So that means that we can create HTML elements at any time we wish

just by using code. But there's actually a few ways that you can do this.

So previously I showed you how you can use the before.

Now there's also after which creates our HTML elements after the element that we've selected.

So in this case it creates it here after h1.

Now there's also prepend and append, and the difference between, say, prepend and before is that prepend

will

add your new HTML element into the item that you've selected just after the opening tag.

So if you go ahead and inspect on this new button you can see that it's been added inside the h1, just

before the word Hello.

And the button that we appended got added just after the content of the h1,

but before the end of the h1.

So using before, after, prepend and append, we have a lot of control over where our newly created HTML

element is going to go.

So just as a reminder the before method will add your new element before the opening tag of the selected

element,

so in this case it was our h1, and the after method will add it after the h1, but the prepend and append

are a little bit special.

They’ll add your element just before the content of the h1 and right after the opening tag, and append does

the opposite where it gets added after the content of your h1 but still inside the h1 element.

Now if you wanted to remove elements it's also really really simple.

All you have to do is just use our dollar sign to select the elements that you want to remove.

For example say if we wanted to get rid of all of our buttons then we can simply select all of them

and say .remove, and that will get rid of all of the button elements inside our current web page.