Getting Started With JQuery - Manipulating The DOM
Written by Ian Elliot   
Friday, 01 February 2013
Article Index
Getting Started With JQuery - Manipulating The DOM
Move and Copy

Moving and Cloning

Now we come to a subtle point that often confuses the beginner. If there is an array of elements to be appended or prepended to then a copy of the dom object is added to each one. For example:

$("div").append(divObj);

will append a copy of the divObj to each of the div elements in the document. 

This might lead you to belive that you can do something like:

$("#mydiv1").append(divObj);
$("#mydiv2").append(divObj);

and expect to find divObj appended to each of the divs.

This isn't the case.

What happens is that you will find divObj appended only to the final div, i.e. mydiv2.

When you append to an array of objects a copy of the object being appended is automatically created. When you append an object more than once a copy isn't created and the original object is just relocated i.e. moved.

You can use this technique to move nodes around the DOM. For example:

$("#mydiv2").append($(#mydiv1));

moves #mydiv1 to be a child of #mydiv2. 

Suppose you actually want to append lots of copies of the same DOM object - how do you do this?

The solution is to use the clone method which makes a complete copy of any jQuery object - or any object for that matter.

So to add two copies of divObj one to each div you would use:

$("#div1").append(divObj.clone()); $("#div2").append($(divObj.clone()));

Similarly if you want to copy an object from one place to another rather than move it then simply clone it first. For example:

$("#mydiv2").append($(#mydiv1).clone());

which of course results in to copies of #mydiv2 and hence two elements with the same id - not a good idea.

Building A Dynamic Table

We could continue with the theory of DOM creation and manipulation for a lot longer but it is time for a simple example. Suppose you want to generate a table dynamically. Then what you need to do is build a sub-tree with the required rows and  data cells. The best way to do this is to create a function so that you can stamp out as many tables as you require:

function table(n, m) {

In this example the table will have n rows and m columns but you can add additional parameters or better an options object to set other details of the table.

The first thing to do is to create one object of each type that we are going to use to build the table - one table, one table body, one table row and one table data cell:

var table = $("<table>");
var tbody = $("<tbody>");
var row = $("<tr>");
var cell = $("<td>");

The idea is that once we have one of each type of object we can build the table using append.

First we need to create n rows and the simplest way to do this is to use a for loop and the clone method to create a new row object. You might say why not just create a new row object but the idea is that if the row object has already been customized in some way it is simpler to stamp out copies than to create new objects from scratch:

for (var i = 0; i < n; i++) {
 var tempRow = row.clone();

Now we have a row object we can create some data cells and append them:

for (var j = 0; j < m; j++) {
  tempRow.append(cell.clone().html(i+","+j));
}

Again the clone method is used so as to replicate any custom settings on the basic cell object Notice that to give the table something to display we use the html method to add some content  - the row and column number.

Once the row has been built we can append it to the table body and let the row for loop continue. Finally we append the table body to the table object and return it as the result:

tbody.append(tempRow);
}
table.append(tbody);
return table;
}

The complete function is:

function table(n, m) {
 var table = $("<table>");
 var tbody = $("<tbody>");
 var row = $("<tr>");
 var cell = $("<td>");
 for (var i = 0; i < n; i++) {
  var tempRow = row.clone();
  for (var j = 0; j < m; j++) {
   tempRow.append(cell.clone().html(i+","+j));
  }
  tbody.append(tempRow);
 }
 table.append(tbody);
 return table;
}

To use it you would simply call it and append the result to whatever element you wanted to:

$("body").append(table(3, 2));

There are many ways of creating a table using jQuery and you can argue issues of efficiency verses elegance. If efficiency isn't a big issue, and with browsers and JavaScript engines getting faster it often isn't then this sort of construction is easier to understand and more logically structured than yards of HTML.

Of course if you really want to create an "enterprise" quality custom control then you probably should create at the very least a jQuery addin and preferably a jQuery UI widget - which is something we will find out how to do in a later article.

 

More Information

http://jquery.com/

 

justjquery

Just jQuery

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

blog comments powered by Disqus

 

Banner


Just JavaScript - The Prototype Mechanism

The prototype is about the most mysterious part of JavaScript. Once you have mastered the call context and the constructor, it is the prototype that you have to turn to. How does it work? How do you u [ ... ]



Getting Started With jQuery - Advanced Filters

When you first encounter filters they seem easy enough - just extract the results you want from the results you have. The trouble is that filters are fun and jQuery pushes the idea beyond the obvious. [ ... ]


Other Articles



Last Updated ( Saturday, 25 October 2014 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.