In this tutorial we will cover how to retrieve information from one element to append to another element. We will also uss .css() to change the background color of an element to indicate that it has bee clicked. Additionally, we will demonstrate the use of $(this) in a function for targeting the individual element that received the action.

This tutorial will use the jQuery API .click(), .html().css() and .append() methods and $(this).

 

jquery-blank.html

Create a new document: tutorial-5.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-5.html.


Create the HTML elements

Inside of the <body>...</body> tags we are going to create a several <div class="clickHereBox"> elements, but have different contents for each. We are also creating a receiving box that will have the contents of the clicked box added for each click the visitor makes.

Type the following into your open document:

<body>
<div id="container">
    <p id="instructions">Click on the fruits in the order of what you like the most to what you like the least.</p>
    <div id="myList">
        <h3>My Favorite Fruits</h3>
    </div>
    <div class="clickHereBox">
        <h4>Apples</h4>
    </div>
    <div class="clickHereBox">
        <h4>Bananas</h4>
    </div>
    <div class="clickHereBox">
        <h4>Strawberries</h4>
    </div>
    <div class="clickHereBox">
        <h4>Oranges</h4>
    </div>
    <div class="clickHereBox">
        <h4>Mangoes</h4>
    </div>
    <p style="clear:both">&nbsp;</p>
</div>
</body>


Style the HTML element

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
    body{background: url(../sitegraphics/jqz-demo.jpg); font-family: sans-serif;}
    #container {width: 400px; margin: 0 auto; background: #ffffff;padding:10px 20px;}
    .clickHereBox {width: 140px;padding: 10px;text-align: center; background: #ddff99;
    float: left;clear: left;margin: 10px;border: 2px #000 solid;cursor: pointer;}
    .clickHereBox h4 {display: inline;}
    #myList {width: 170px; height: 300px; background: #F0F0F0;float: right;
    border: 2px #000 solid;margin-top: 10px;padding: 2px 8px;}  
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
    $(document).ready(function(){
        $(".clickHereBox").click(function(){
            $(this).css("background-color","#F0F0F0");
            var newFruit = $(this).html();
            $("#myList").append(newFruit);
        }); 
    });  // End document.ready()
</script>


Let's go thru the script step by step:

$(".clickHereBox").click(function(){

this starts the function for each time a visitor clicks on an element of class="clickHereBox"

$(this).css("background-color","#F0F0F0");

By using $(this) we will only be selecting the element that received the action and not all of the other elements with the same class

var newFruit = $(this).html();

with this line we are getting all the HTML contents of the element that was clicked on. This includes any HTML tags and any other content

$("#myList").append(newFruit);

this step will take the information that we just got in the prior step and add it to the element id="myList"

});

this is necessary to close the function of the .click() method


Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-5.html

When you open up the document, you should see something like this.