Re-using DOM elements

When using jQuery to dynamically create elements such as list items, divisions, and input, it can be useful to be able to re-use these elements without having to rewrite them within JavaScript. Instead, it may be beneficial to copy the elements and just modify the sections you wish to change.

Getting ready

Using the text editor of your choice, create a blank HTML document named recipe-12.html, which is within a location that has easy access to the latest version of jQuery.

How to do it…

Learn how to re-use DOM elements by performing each of the following recipe steps:

Within the recipe-12.html page you have just created, add the following HTML, CSS, and JavaScript code:

<!DOCTYPE html>
<html>
<head>
   <title>Reusing DOM elements</title>
   <style type="text/css">
      .one {
         background-color: #CCC;
         color: #333;
      }
      .two {
         background-color: lawngreen;
         color: white;
      }
      .three {
         background-color: darkgreen;
         color: white;
      }
      .four {
         background-color: black;
         color: #666;
      }
      .dinosaur {
         background-color: darkred;
         color: red;
      }
   </style>
   <script src="jquery.min.js"></script>
   <script>
      var animals = [
         {
            id: 1,
            name: 'Dog',
            type: 'Mammal',
            class: 'one'
         },
         {
            id: 2,
            name: 'Cat',
            type: 'Mammal',
            class: 'one'
         },
         {
            id: 3,
            name: 'Goat',
            type: 'Mammal',
            class: 'one'
         },
         {
            id: 4,
            name: 'Lizard',
            type: 'Reptile',
            class: 'two'
         },
         {
            id: 5,
            name: 'Frog',
            type: 'Amphibian',
            class: 'three'
         },
         {
            id: 6,
            name: 'Spider',
            type: 'Arachnid',
            class: 'four'
         }
      ];
      $(function(){

      });
   </script>
</head>
<body>
<ul id="animal-list">
   <li class='dinosaur'><strong><span class='name'>T-Rex</span></strong> <span class='type'>Dinosaur</span></li>
</ul>
</body>
</html>

Within the HTML page you created from the preceding code, add the following JavaScript within $(function(){});:

$.each(animals, function(index, obj){
//Clone the first element in the animal list
var listTemplate = $('#animal-list li').first().clone();
//Change its name to match this objects name
listTemplate.find('.name').html(obj.name);
//Changes its type to match this objects type
listTemplate.find('.type').html(obj.type);
//Remove all its current classes
listTemplate.removeClass();
//Add the class from this object
listTemplate.addClass(obj.class);
//Append the modified element to the end of the list
$('#animal-list').append(listTemplate);
});

If you open your newly created web page within a browser, you should be provided with a populated list element that matches the objects within the JavaScript array animals.

How it works…

By using jQuery's $.each() method, we are able to iterate through each of the objects within the JavaScript animals array. Then, for each of the JavaScript objects, we clone the first element in the unordered list using $('#animal-list li').first().clone(); and store it within the listTemplate variable. This variable now holds a copy of the first list element within the unordered list #animal-list. We can now manipulate this element as we would do with any other DOM element. We are able to use jQuery's find() function to locate the span elements with the .name and .type class names. We can then alter their content to match the current object's name and type values. Next, we remove the previous styles on the cloned element with removeClass() (not providing an argument will remove all current classes without having to specify each one of them), and add the style that is specified within the JavaScript object using the addClass() function that jQuery provides us with. Finally, we can append the modified HTML element to the end of the list using append().

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Re-using DOM elements

Getting ready

How to do it…

How it works…

See also

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Re-using DOM elements

Getting ready

How to do it…

How it works…

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access