|Just jQuery The Core UI - Modifying The DOM|
|Written by Ian Elliot|
|Thursday, 16 June 2022|
Page 3 of 3
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.
<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:
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;
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:
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:
changes the content of the div to:
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:
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.
Available as a Book:
buy from Amazon
buy from Amazon
or email your comment to: firstname.lastname@example.org
|Last Updated ( Saturday, 18 June 2022 )|