Dynamically get and set an elements content with jQuery

This is the first post in a long series of how to do stuff with jQuery. They will start with some basic stuff and get more complex as the year goes by. New jQuery and Javascript posts are made on this blog on Sundays and Wednesdays; subscribe to my blog at the end of this post so you don’t miss out. This first post looks at how to get and set the HTML of an HTML element with jQuery.

The examples below have all been tested in jQuery 1.2.6.

Example HTML

The following HTML fragment shows the HTML that we are going to get and set with jQuery:

<p id="example_placeholder">Existing content that will be replaced.</p>

Getting the HTML with jQuery

To get the HTML of an element with jQuery, using the example paragraph above, you would do this:

$('#example_placeholder').html();

On its own that chunk of Javascript code isn’t going to do anything, so you’d normally be assigning it to a variable or some other useful thing. For example, you could combine it with window.alert to show the contents in a window:

window.alert($('#example_placeholder').html());

Setting the HTML with jQuery

Use the same html() function to change the HTML of an element with jQuery. The following example changes the HTML within the example <p> tag to "’This existing content has been replaced with this content.’:

$('#example_placeholder').html('This existing content has been replaced with this content.');

Appending to the HTML with jQuery

As well as getting and setting the HTML, you can append HTML to the end of an HTML element with jQuery using the append() function. In the following example some additional HTML is appended to the end of the <p> tag in the HTML example at the start of this post:

$('#example_placeholder').append(' This text has been appended to the end.');

Example in action

Finally, here’s an example for you to try out. Note that if you are reading this in an email or a feed reader then the example isn’t going to work. Please click through to this article in a web browser and it will work.

The full Javascript code is as follows:

function example_reset() {
	$('#example_placeholder').html('Existing content that will be replaced.');
}

function example_replace() {
    $('#example_placeholder').html('This existing content has been replaced with this content.');
}

function example_show() {
    window.alert($('#example_placeholder').html());
}

function example_append() {
    $('#example_placeholder').append(' This text has been appended to the end.');
}

And the HTML:

<p id="example_placeholder">Existing content that will be replaced.</p>

<input type="button" onclick="example_reset()" value="Reset text" />
<input type="button" onclick="example_replace()" value="Replace text" />
<input type="button" onclick="example_show()" value="Show text" />
<input type="button" onclick="example_append()" value="Append text" />

And finally the example in action (remember that you will need to click through to this article in a web browser if you’re reading it in a feed reader or email otherwise it won’t work):

Future posts

The next couple of posts will look at replacing HTML content using jQuery and AJAX. Remember to subscribe to my RSS feed (or by email) using the links under this post to get these automatically in your feed reader or by email so you don’t miss out.