Week 3 - Adding / Removing HTML Elements

9 Mar 2010 - tips-tutorials

Welcome to week 3 of our five tutorials on JQuery for beginners.

This week I will show you how to add and remove HTML elements from a page of your website.

Adding HTML Elements

For this example, I will add a heading to a page when clicking on a link.

Here is an example of what we shall produce:

click to add HTML

How to develop it

First, attach the JQuery library as explained in lesson 1. If you have yet to view this lesson visit lesson 1 now.

Now we will produce the HTML for this example which will consist of an anchor tag and when it is clicked will add the HTML to the page.

I will give this anchor tag a class of 'link' which can then be referenced in the JQuery. It is good practise to reference class names in JQuery otherwise every tag on the page will be referenced, and not a specific one.

We will also include a div with an ID of response for the HTML JQuery produces to appear in.

Now for the JQuery which we will put in the head section of the page.

Breaking Down The Code

This means when the document object is ready code inside the { } will be executed.

We an anchor tag with a class of 'link' is clicked, a function will be executed.

Here a header in HTML is produced and the appendTo() function will append the div with an ID of response with the HTML.Then for good effect I have used the fadeIn() function to fadeIn the results over a period of 5 seconds. (the hide() function is used before the fadeIn() function to make sure the element not visable before it is faded in)

This takes away any action the anchor tag may have so therefore it will only activate the JQuery and redirect the page.

Finished code

Removing HTML from a Page

For this example I am going to show you how to remove a list item from a page.

Here is an example of what we shall produce:

• Shawshanks Redemption
• Requiem for a Dream
• Fight Club
• The Fountain
• Leaving Las Vegas

How to develop it

Fit lets develop the html for this example. We will have a list with 5 items showing my favourite movies. The list will have an ID of 'movies'.

We will also have a button with an ID of 'remove' and a value of 'Remove Movie' which will show on the button.

Now for the JQuery.

Breaking down the code

Any time an input button with an ID of remove is clicked a function will be executed

Here, the last li element inside a ul with an ID of movies will be removed from the page using the remove() function.Each time a li element is removed, the last element will change until there are no more left to remove!

Finished Code

SHARE THIS

Share

Your Comments

Comment on this Post

Name :

 

Comment :

 

 

Please enter the verification code that appears in the box above into the box below to proceed: