Content

So far we have been looking at how to modify the part of the DOM object that corresponds to "the tag". That is we have been modifying attributes, but most tags have content as well as attributes. The content is roughly speaking everything between the opening and closing tag.

For example for a div, everything between <div> and </div> can be regarded as its content. However, other tags nested within the div are child elements and part of the DOM in their own right. If you want to modify nested tags or elements then in most cases you simply use selectors or filters to find the element and then modify it directly using attributes and properties. However, you can treat everything between the opening and closing tags as content if you want to.

The html method will get the HTML contents of the first element in the matched set or set the HTML contents of all of the elements. Notice that html returns a string that is everything between the opening and closing tag – even if it isn't HTML proper. 

For example:

<div class="myClass">
 some div text
 <p>paragraph text</p>
 some more div text
</div>

In this case everything between the <div> and the </div> is considered to be HTML content.

If you try: 

console.log($(".myClass").html());

then what you will see is: 

some div text
 <p>paragraph text</p>
some more div text 

that is, everything between the tags. 

However, every tag also has a text node associated with it which is composed of just the text it contains. The text method will return or set all of the text in the match element. That is, it essentially strips out the HTML tags from the content. The subtle part is that it returns all of the text contained directly between the tags and any text contained within any child elements. It also returns all the text from every object in the results array. You can think of it as returning the maximum amount of text from the matched elements that it can.

So in the case of the example HTML above; 

console.log($(".myClass").text());

will display:

some div text
paragraph text
some more div text 

that is, everything that the html method returned with the tags stripped out. 

When you use html or text to change what is contained in an element you have to be aware that it is very powerful. If you use:

$(".myClass").html("<p>replacement</p>");

the DOM is changed so that all of the child nodes of the div are removed. That part of the DOM is completely replaced by the paragraph element and its text. That is, the DOM is changed from how it would have been if the paragraph tags had been the only content of the div. 

<div class="myClass">
 <p>replacement</p>
</div>

which is interpreted as HTML and all you see on the page is the text “replacement”.

When used to change the content, the text method does the same thing as the html method, but it interprets everything as text and it will escape any HTML characters so that it displays as text and not be interpreted as HTML. For example:

$(".myClass").text(“<p>replacement</p>");

changes the content of the div to:

<p>replacement</p>

which is not interpreted as HTML but as text, that is you actually see the tags displayed on the page. Notice that it too removes all of the old content. You also need to keep in mind that the content replacement is performed on every element in the results.

There are also versions of the html and text methods which accept a function. The first parameter of the function is the index of the element and the second is its html or text content. The string that the function returns is used as the new HTML or text content. If you want to replace the contents of a script tag you need to use the text method as the script doesn't contain HTML. 

The final way of working with the content of a tag is to use the content method. This returns everything between the opening and closing tag, but not as a string. It returns a new results array. This is usually listed as a traversal filter, but it is easy to see that you could use it to process and modify the contents of an opening and closing tag using jQuery objects rather than strings. For example: 

$(".myClass").contents().filter("p").text("replacement");

Here the contents method returns a result array with a p element object and its text node. The p element object is selected by the filter method and its text is replaced.

The resulting DOM is equivalent to:

<div class="myClass">
Some div text.
<p>replacement</p>
<div>some inner div text</div
Some more div text.
</div>

Sometimes it is easier to set the contents using a string, but it is often easier, and usually neater, to set it using contents to derive the contents as a jQuery result which you can process further. 

Modifying existing DOM objects is just the start. We can also use jQuery to create and initialize completely new DOM objects. This allows us to create a dynamic UI from code. This is the subject of the next chapter.

Summary

• The attributes property of a DOM Object forms a name value array of the attributes defined in the HTML tag.  

• Some attributes are so commonly used that the browser creates properties that correspond to them and uses the corresponding attribute to initialize them.

• Attributes tend to stay at the value set in the tag, whereas properties tend to reflect the current value as modified by the user.

• The attr function returns the value of the specified attribute of the first element in the set of selected elements or sets the attribute on all of the elements. You can also pass an object of attributes which will be added to the attribute map.

• As well as the attr method there is also the removeAttr method that removes the attribute from the attributes property.

• The prop function can be used to get the property value of the first element in the results set or set the property of all of them.

• The style attribute is so important, and potentially complex that jQuery provides the css function to allow you to work with "style" as if it was a collection of attributes in its own right.

• You can also set the class attribute using addClass and removeClass

• There are also separate methods to get and set all of the css dimensions:

  .height() .innerHeight() .outerHeight()
  .width()  .innerWidth()  .outerWidth()

• There are two methods to get and set absolute and relative location attributes:

  .offset() .position()

• There are also two methods concerned with getting and setting scrollbar positions: 

  .scrollLeft() .scrollTop()

• The html method will get the HTML contents of the first element in the matched set or set the HTML contents of all of the elements.

• The text method will return or set all of the text in the match element.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

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

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>

<ASIN:1871962579>