Modifying existing content Adding/Removing content on a page using jQuery

Learning Objectives By the end of this lecture, you should be able to: – Know when and how to apply the html(), text(), append(), prepend(), before(), after(), remove(), replaceWith() functions. – Appreciate the concept that the key way to learn jQuery (and in fact any programming language) is to “learn how to learn” to use functions. – Look up functions in the API to learn more about them.

Learn how to learn Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. -Maimonidies We will spend a great deal of time in this course going over various functions. However, the objective is absolutely NOT to simply memorize all the details of these various functions. Rather, the idea is that you should start getting comfortable about how and where to LEARN about the various functions available. There are far too many functions in programming languages for any person to learn all of them. Instead, you should be able to go to a reference and look around to see what kinds of functions are available to you, and then how to use them properly. We will discuss more about this as we talk about using the jQuery API.

The html() function “Content”: When we talk about the ‘content’ of a web page, we typically are referring to the information that is seen and heard when a user visits your page. In other words, by ‘content’ we are referring to things like the text visitors read, the images they see, sounds they might hear, and so on. ‘Content’ does not include things such as meta tags, style tags, script code and so on. jQuery give you all kinds of ways of manipulating the content on a page. You can do things like add content, remove content, position content on a page, add/remove tags, modify attributes and so on. The html() function: This function allows you to determine what text is present inside a selection. In addition to allowing you to see what content is present, this function also allows you to modify or even remove that text. Suppose you have the following HTML: Errors Here. You could view the (unparsed) HTML written inside the ‘errors’ div with: alert( $('#errors').html() ); In this case, you would see the following text inside an alert box: Errors Here. Note that you would not see any HTML markp since alert boxes are unable to display markup. If you wanted to view the actual content including HTML markup, you could use document.write() : document.write( $('#errors').html() ); In this case, we would see the text ‘Errors Here.’ in ‘h2’ markup

The html() function contd In addition to allowing you to determine what text is present inside a selection, the html() function also allows you to modify or even remove that text. Errors Here. Using the code above as an example, you could output your own specified HTML content by placing information inside the html() function’s parentheses: $('#errors').html(" Some errors are present. "); This would output ‘Some errors are present’ inside h3 markup. IMPORTANT: Note that when you provide an argument to the html() function as shown in this example, you replace the code that was originally present inside that section. In this case, the code inside the ‘errors’ ID section is replaced by the new content. That is, the content ‘ Errors Here… ” (in h2 markup) would be replaced by “ Some errors are present “ (in h3 markup).

Bug Alert!! Be careful – here is a situation that can be easily missed and lead to headaches when you are trying to work with selections: Suppose you have the following HTML: Errors Here Blah blah blah In this case, the statement: document.write( $('#errors').html() ); Will output ‘Errors Here’ in h2 markup and the words Blah blah blah in h3 markup. However, the statement: document.write( $('#errors h2').html() ); Will output only the words ‘Errors Here’ – and they will NOT be in h2 markup! The reason is that the moment you append the ‘h2’ selector after the ‘#errors’ selector, jQuery only selects inside the h2 tag. In other words, the ‘h2’ tag itself is left out! AS ALWAYS, be sure to try this example out for yourself and experiment with it.

The text() function I should mention that you will probably not use the text() function all that often. However, we will discuss it here to illustrate a couple of concepts. The text() function returns only the text inside the selection and ignores all HTML tags. Suppose you have the following HTML: Errors Here. Blah blah blah. document.write( $('#errors').text() ); Will output: Errors Here. Blah blah blah. WITHOUT any HTML markup.

The text() function contd Recall that if you provide an argument to the html() function as shown here $('#someId').html(' Hello '); then all of the information that was previously inside the #someId section will be replaced by Hello. The text() function works exactly the same way. However, recall that this function ignores HTML markup. What happens in this case, is that the function will strip out any HTML tags and replace them by their escaped characters. So any ‘ ’ symbols by >. In other words, if you only wanted to replace the text inside of the selected region without replacing any of the HTML markup tags and attributes you would use the text() function. Suppose you have the following HTML: Errors Here… Then the following line: $('#errors').text(' Errors are present '); Will replace the content inside ‘ errors ’ with the text: <h2>Errors are present</h2>

The text() function Pop Quiz: Errors Here… Look at the HTML example (in green) above. Do you think the following statement would yield any replacements? $('#container h2').text('Some errors are present'); Answer: This will work. The reason is that the text() function will keep digging inside the ‘ container ’ div, even going through nested divs such as ‘ errors ’ for any ‘h2’ tags. It will then do the required replacement(s).

The append() and prepend() functions These are very useful functions! The prepend() function adds items immediately inside of the selection. You might use it to add text to the beginning of a paragraph, or div section, or list, etc. $('#errors').prepend(" Have a great day! "); Example: Some of my favorite sports: Hockey Soccer Wrestling To add an item to the list: $('#favSports').prepend(" Basket Weaving "); In this case, the code would look inside the ‘ favSports ’ section (i.e. it goes inside the tag) and would add the argument (in this case, the staement) directly inside the ‘favrSports’ section. The net result would be that ‘ Basket Weaving ’ is added as an to the beginning of our list. There is a corresponding append() function that adds HTML content immediately before the END of the selection. $('#footer').append(" Today is: " + Date() + " "); //Note our use of the JS ‘Date()’ function inside the jQuery statement See: append_prepend.htm

Deciding where/when to place ID attributes Some of my favorite sports: Hockey Soccer Wrestling What do you think would happen here? $('#favSports').prepend(" Basket Weaving "); Recall that the prepend function will look inside the ‘ favSports ’ section and and add the text to the very top of that section. In this case, the end result would be to add ‘ Basket Weaving ’ before the words ‘ Some of my favorite sports ’. KEY POINT: You have to be careful exactly where you put your IDs. In this case, because we anticipate modifying the list using scripting (e.g. in response to the user typing new favorite sporst inside text fields or whatnot), your ID should be inside the ‘ul’ tag. On the other hand, if you plan on doing something with the entire section (e.g. showing/hiding it, modifying its appearance, etc), then you should wrap it inside a tag. However, that div tag should have its own separate ID. There is a very important underlying point here: While it is always a good idea to place div tags around key sections of your page, you will often find that you need to be precise in deciding which tags should have an ID attribute. In the example shown here, because we anticipate adding items to the list, then the tag should have its own ID attribute so that we can use our append/prepend functions. Sometimes you will find that you will have to move an ID attribute from one tag to a different one. When to have an ID depends on what you anticipate doing with or doing to that particular section.

The before() and after() functions Very similar to append()/prepend(), however, in this case, the content is added just outside of the selector. This is an important distinction! Example: Hockey Soccer Wrestling $('#favSports').before(" My favorite sports "); //Would place this content just BEFORE the ‘ul’ tag Also very handy in form validation. Suppose you have a required text field such as Name: and the user has left it blank. (We’ll learn how to check for this a little later). You could place an error message just after this text field with: $('#txtName').after(" You forgot to type your name! ");

The remove() function Fairly intuitive… You might use the remove function to hide a pop-up dialog box. Say you have an error message that pops up in a nicely formatted window (as opposed to a boring ‘alert’ box). If the box has an ‘Okay’ button, you can remove the box with the remove() function: Example: //Code to create the box... <input type="button" value="Okay" onclick="$('#error_popup').remove()"

The replaceWith() function Also fairly obvious. However, look at the following code as it also demonstrates that the ‘onclick’ attribute can work with an image: Example: <img src="baseball.jpg" id="baseball" onclick="$('#baseball').replaceWith(' I love this game!! ')"> In this case, when the user clicks on the image, it will be replaced by the h2 text. A reminder about single/double quotes: Generally speaking, you can use either one as long as you are consistent. Just be sure that when you open one set of quotes (whether single or double), you close with the same kind. Also, try to be consistent: I suggest always placing the value of any HTML attribute (e.g. src, href, alt, onclick, type,etc, etc, etc) inside double quotes.In the image example above, note how the values for the src, id, onclick attributes are all inside double quotes.

Using the jQuery API The various functions to manipulate content discussed in this lecture are by no means a complete list. Remember that you should always use a reference that you can trust. This means one that is updated along with the technical standards that you are using. For example, for HTML, you might go to a page maintained by the World Wide Web Consortium (W3C). The W3Schools site, though not perfect, is another site that does a good job of staying on top of the standards. It also give lots of examples. You should absolutely spend time becoming familiar with using the API. Initially, there will be many things you don’t understand. However, over time, you will learn more about the various terms and symbols used in the API. For now, just take a look at these web pages and get a sense of how they work. We will return to the API in more detail periodically throughout the course. The jQuery API can be found at: The jQuery API relating specifically to adding/modifying content on a page can be found at: