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

jQuery provides you with methods for working with the DOM in ways powerful enough to allow you to create custom controls that extend what you can incorporate into an HTML page.  

Getting Started With jQuery

When you first start working with jQuery there is a tendency to focus on the selector. Writing a selector that picks out the exact elements in the page that you are looking for can be a challenge. However, you really shouldn't get too bogged down in the details. You can use jQuery to find elements and then modify them, but in many cases it is as useful, and probably more useful, to use jQuery to create elements for you. For example, it is easy to write a function that will dynamically create a table, complete with data, if this is what is required. You can also use the same techniques to build custom controls using nothing but the basic HTML elements.

Let's see how this works.

It is assumed that you know the basics of how jQuery works. In particular that $(selector) returns a jQuery object complete with an array of all of the DOM elements that match the selector. For a basic introduction see:  Getting Started With jQuery - The DOM

Making DOM Objects

jQuery makes it trivial to create a DOM object, wrapped as a jQuery object. All you have to do is use the global jQuery function. For example, to create a div you simply use:

var divObj=$("<div>");

Notice that you do need to include the full tag including "<>". The command $("div") is a selector that returns a jQuery object containing an array of all of the div elements in the page.

The rule is that if you make the call $(string) then, if the string parses to valid HTML, the elements it contains are created as a DOM sub-tree - more of this later. If the string isn't valid HTML, then jQuery attempts to interpret it as a selector and to return the corresponding elements as an array in a jQuery object.

You also need to notice that to create a single DOM object you don't need a closing tag to make the HTML valid. That is, you don't have to use:

var divObj=$("<div></div>");

It works but the closing tag is unnecessary.

The final thing to notice is that the object that is created is a jQuery object containing an array of DOM element objects, even when only one DOM object has been created.

That is:

var divObj=$("<div>")[0];

is a DOM element object and not a jQuery object.

When you are creating a single HTML element object the closing tag doesn't matter, but when you are working with multiple objects it becomes vital.

If you specify more than one HTML tag then how you specify the closing tag determines how the objects are nested.

If you just write one tag after another without specifying any closing tags then each object is created as a child of the one before.

For example:

var divObj=$("<div><div><p>");

creates a single object which corresponds to the sub-tree:

<div>
  <div>
   <p>
  
</p>
 
</div>
</div>

 

You can create other arrangements of sub-tree by explicitly including the closing tags.

For example:

var divObj=$("<div></div><div></div><p></p>");

creates an array of three DOM objects. For example:

divObj[0];

is an object corresponding to he first div.

The rule is that the valid HTML is parsed to create a single object for each element at the top level with other objects nested within it as the markup dictates.

Attributes

You can also set attributes of objects that you create either withing the valid HTML that you specify or afterwards using jQuery methods.

For example, to set the id of a div you might use:

var divObj=$("<div id='myDiv'>");

or you could use:

var divObj=$("<div>");
divObj.attr("id","myDiv");

or, of course, you could use the usual jQuery fluent style:

var divObj=$("<div>").attr("id","myDiv");

 

You can set any attribute using the same approach.  The main complication is that the attr method will set the attribute on all of the elements wrapped by the jQuery object. If the attribute already exists on an element then its value is changed. You can also set multiple attributes by passing an object as a property value list. You can also compute the new value of an attribute by passing a function as the second argument.

You can use the attr method to change the style attribute. For example:

divObj.attr("style","width:300px");

Alternatively you can use the css method to set a style property without having to include the "style" attribute:

divObj.css("width","300px");

Similarly you can set multiple style properties by passing an object as a property value pair list.

Once again notice that css sets the styles of all of the elements in the jQuery object.

As well as the attr method there is also the removeAttr method that sets the attribute back to its default value.

You can also use addClass and removeClass to add and remove the class attribute.

There are also a range of method that return and set attribute values directly such as height and width.

Adding to the DOM

At the moment we are creating jQuery DOM objects and even DOM sub-trees, but so far we haven't added them to the page's DOM. What this means is that the new elements don't actually appear on the page and, as a general pattern, it is worth building the DOM sub-tree of elements you need and then add it to the DOM in one operation.

Of course, where you add it to the page's DOM controls where the new element will appear. As the DOM forms a tree structure of elements, what you have to do is use jQuery to select a particular node in the tree and then use the append or appendTo methods to add the new sub-tree of elements.

The append method

element1.append(element2);

will append element2 as the last child of element1 and return element1.

The appendTo method:

element1.appendTo(element2);

appends element1 as the last child of element2 and returns element1.

For example:

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

appends divObj as the last child of the body element and

divObj.appendTo($("body"));

does the same thing.

Which you use is a matter of choice, but notice that append makes it easy to chain methods that modify the object being appended to.

For example:

$("body").append(divObj1).append(divObj2);

appends divObj1 and then divObj2 to the body element .

By contrast the appendTo method makes it easy to chain methods that work on the object being appended.

For example:

divObj.appendTo($("body")).attr("id","myDiv");

appends the divObj to the body element and sets the divObj's id to myDiv.

As well as append and appendTo there is also prepend and prependTo which work in the same way but add the new element as the first child.

As a short cut you can also use append/prepend with a string of valid HTML which creates first creates the DOM subtree and then adds it. So, for example:

$("body").append("<div>");

adds a new div object to be the last child of the body element.

You can also add a raw DOM element object using append/prepend without having to wrap it in a jQuery object first.

For example after.

var divObj=$("<div></div><div></div><p></p>");

divObj[0] is a raw DOM element object and you might think that you need to use:

$("body").append($(divObj[0]));

but you can use:

$("body").append(divObj[0]);



Last Updated ( Tuesday, 12 February 2013 )
 
 

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