The 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 of 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 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 of 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 div text 


that is everything that the html method returned but 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 a very powerful change. If you use:

$(".myClass").html("<p>replacment</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>

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>replacment</p>");

changes the content of the div to:

<p> replacment</p>

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 traversing filter, but it is easy to see that you could use it to process and modify the contents of a opening and closing tag using jQuery objects rather than strings.

For example, if you use:

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

contents returns a result array with text nodes and a p element object. This is selected by the filter method and its text is replaced. The resulting DOM is equivalent to:

<div class="myClass">
Some div text.
<p>replacment</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 futher. 

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

 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