Hello, in this jQuery video, I am going to show you how to add new HTML elements to your page using well jQuery. So first of all, let me set a few things up. I'm gonna create a div div. Hello, we'll keep it simple. I'm gonna have an ID, or I'm gonna have a button as well. And there's four different ways that you can add new HTML content, you can append content, which is insert the content at the end of the selected member still within it, the prepend which is opposite that insert within the element, but start with this after so insert the content directly after the element but not inside of it, and then before which is the opposite of that, so insert it before the selected element.
And then if I only say a pin for this, I do all the buttons from the start. So this is pre planned. We planned this is going to be this is going to be full. I just need to set this up for now, one last thing that I want to do is apply some CSS to the epic div. So I'm gonna say, epic div. I'm gonna say, color red.
The reason I'm applying this is anything that gets inserted within the epic Did you know we'll have that property that's part of it. So now We're going to detect the button click or detect when an event of click has occurred on the button. So more information about that, feel free to check out the event part of this series epic button. I'm going to copy this and this and this is going to be this is going to be full. So I'm going to in here, first of all you need to select what you're adding the content to. So in our case is the div that does a deal that has an ID of every active function for a pen label just got a pen and now you Following your HTML content, and this could be, you know, actual HTML content.
So I could literally just put HTML content. So I'm actually going to do that. You could just put regular text, but I'm gonna clean that taking off content. I'm gonna put in before bold. And I'm going to say, a pen. So if I run this up when I click it, as you can see, it's bold, and it's inside of it.
So if I reload it, we have the diff. I click it, it's within the div. And if I click it again, it'll just keep adding it brought to the end. Now, to prepend it. We just call the prepare method prepend and 304 reload, click When you add it right it starts with an add any space you want to space. Make sure you put it here.
Now if I were to do that, and it see data space now, and as you can also see it's white at the start, Moxie doctor had pasted my elements in here, he pulls up pure text as well. Now, let me show you how, what the after one looks like after and before I'll implement them right now. So after, you can guess it's just the method that we're going to have one before. Now if I reload it, let's see what we get. So if I click append prepend, so that's the identity within the div, but right after, as you can see it directly at the afterward. The reason is on a new line is because the div is a block level element.
And if I click up there, you know the before and it doesn't have Have the Dave styling Chris literally before the element, you know, and it's not inside. So that's how you add hate email content. You can go crazy and do whatever you want. If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.