jQuery 3 - Modifying DOM Objects
Written by Ian Elliot   
Monday, 03 October 2016
Article Index
jQuery 3 - Modifying DOM Objects
jQuery Functions for Attributes and Properties
Working with Content

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:

&lt;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("&lt;p>replacment&lt;/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. 

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

changes the content of the div to:

&lt;p&gt; replacment&lt;/p&gt;

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:

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

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in
Japan          
Amazon.jp

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

  

Banner


JavaScript Canvas - OffscreenCanvas

OffscreenCanvas is relatively new but it can make your graphics smooth without blocking the UI thread. In this extract from a chapter in my new book on JavaScript Graphics we look at how it works.



JavaScript Data Structures - The Linked List

JavaScript may not have pointers but it has everything you need to construct sophisticated data structures if you think about things in the right way. In this article we implement a classical linked l [ ... ]


Other Articles



Last Updated ( Tuesday, 04 October 2016 )