How to Change HTML Elements with jQuery

WThere are a few ways to change already existing HTML elements with jQuery, depending on what you want to change. For example, say you wanted to change the text of the elements in the page that you just worked on.

Instead of having each element say "Here's," you want it to say "Item." You could add an ID to each element and then change the HTML with the html() or the text() function. But that seems like a lot of work. And it creates another problem if the HTML changes somewhere along the way.

Another way is to loop through each of the list items and change them. jQuery has its own way to loop, called each(). The each() loop method has an advantage over the while and for loops: The each() function can be used with jQuery so you get the full advantage of all the jQuery functions and you can chain the each() function with other jQuery functions.

Chaining is the term used with jQuery to describe what you do when you connect functions with dots in order to make the function apply to the chain.

With just two elements to change, you'd probably just do this in the HTML itself, but this example shows the process and functions for changing HTML so that you can use it when you really need it.

This listing shows the HTML and JavaScript for this example.

<!doctype html>
<script type="text/javascript"
<h1>Adding HTML</h1>
<ul id="theList">
    <li>Here's 1</li>
    <li>Here's 2</li>
<script type="text/javascript">
$(document).ready(function() {
    $("#theList").append("<li>Here's 3</li>");
    $("#theList li").each(function() {
        var existingText = $(this).text().substr(7,1);
        $(this).text("Item " + existingText);

The JavaScript and jQuery here shows a few new things, so look a bit closer at the code.

The first line of the new code is this:

$("#theList li").each(function() {

That line uses a selector to find all <li> elements within the ID of theList. That's a little different than the other selectors you see and represents how jQuery can use the page's hierarchy to access only the items that you want.

The each() function is changed onto the selector and sets up an anonymous function. At this point, you know that the code will begin looping through each <li> element within the ID of theList.

The next line of code looks like this:

var existingText = $(this).text().substr(7,1);

This code sets up a plain JavaScript variable, existingText, and sets it equal to the result of $(this).text().substr(7,1). But what's this, or more appropriately, $(this)? The special selector $(this) refers to the current element being worked on. JavaScript has an equivalent called this, but you want the jQuery version, so you wrap it in the dollar sign/parentheses notation.

The $(this) selector is chained to the jQuery text() function, which retrieves the elements text, with no HTML markup, just the text. The text() function is then chained to the substr() function. The substr() function grabs a substring, or portion of a string, and returns it.

In this case, you want substr() to return to you one single character beginning at the seventh position. You can do this because you know that every element begins with the word Here's followed by a space, like this:

Here's 1

Counting characters from the left, there are six characters in Here's plus one character for the space. That makes seven, so you end up with substr(7,1). Granted, this breaks when you get to ten items because you're only returning a single character.

You could fancy this up by using a regular expression, which you haven't really spent time on yet, so for this example, leave it as is. Okay, if you must know, you could replace the substr() function with the match() function, and it would look like this:

var existingText = $(this).text().match(/[d]/);

Back to reality and the example, the final line of code looks like this:

$(this).text("Item " + existingText);

That line simply calls the text() function, but instead of returning text, this time you set it to "Item " + existingText. Because you have the number of the item in the variable existingText, it's like you're appending it.

A page viewed in a browser looks like this one.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win $500. Easy.