jQuery - Manipulating content

Nov 21, 2012

Table of contents:

Removing elements
Clone
Conclusion

In the Introduction to jQuery post, we scratched the surface of manipulating the style of elements in the DOM. One of the fundamental bits of jQuery is the ability to manipulate the elements of the DOM, not just what they look like.

In this second part of our exploration of jQuery, we will be focusing on manipulating the DOM. Just about everything you do in jQuery will have roots in Manipulating the DOM, so it’s important to get the basics down as a solid foundation.

For this tutorial we are going to need some HTML to work with. Copy and paste the following HTML into a new file and save it. Open up Google Chrome and then open the Javascript Console (Tools >Javascript Console).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="timeline">
  <div class="status">
    <span class="username">Philip Brown</span>
    <span class="time">13:42</span>
    <p>Hello world</p>
  </div>
</div>

Ensure jQuery is loaded by typing into the console:

jQuery;

Selecting content

Finding the content of an element in the DOM is really just the same as selecting the style of an element. To manipulate text, we are going to be using the Text function.

$("div#timeline div.status span.username").text();

When you select an element from the DOM and use the text function without any arguments, you will be returned the content of that element, in this case, “Philip Brown”.

Now try running the following select:

$("div#timeline").text();

Notice how you are returned all of the text that sits within that Timeline Div, but without any of the HTML. The Text function will only return plain text, it will remove any HTML that might also be selected.

Updating content

To update the content of an element, you simply have to select the element, use the Text function and pass what you want to insert into the element.

$("div#timeline div.status p").text("What's up world?!");

Similarly, as you can’t select HTML with the Text function, you also can’t insert it.

Try running this line of code:

$("div#timeline div.status p").text("<h1>Loud noises</h1>");

You’ll see your DOM is updated, but the text is not an H1 heading. This is because the HTML has been escaped and so it is not interpreted as HTML.

Getting and Setting HTML

To combat the problem of stripping out HTML with the Text function, you can simply use the HTML function if you want to get or set HTML.

// Returns the content and HTML
$("div#timeline").html();

// Sets the HTML in an element
$("div#timeline div.status p").html("<h1>Loud noises</h1>");

Prepending

Both the Text and HTML methods are useful if you want to completely update the contents of an element. But more often than not, you will just want to add additional content to an element, rather than completely update it.

The Prepend function allows you to add content to the start of an element.

$("div#timeline div.status p").prepend("Philip says: ");

There is also a very similar jQuery method called PrependTo which essential does the exact same thing. The only difference is the syntax.

$("Philip says: ").prependTo("div#timeline div.status p");

As you can see, you just reverse the content you want to prepend and the selection for where you want to put it.

Appending

The opposite of Prepending is Appending. The Append method allows you to add content after an element.

$("div#timeline div.status span.time").append("pm");

And again, there is also the AppendTo method which works in the same way, but has the opposite syntax.

$("pm").appendTo("div#timeline div.status span.time");

Inserting elements

Append and Prepend are really useful methods if you want to add something to the start or the end, but what about if you want to add something in the middle?

The Before function allows you to Insert into the DOM before a selected element.

$("span.time").before("<span>From Tweetbot</span>");

There is also the InsertBefore method that, much like the Prepend, PrependTo and Append, AppendTo functions, works in the same way, but with slightly different syntax.

$("<span>From Tweetbot</span>").insertBefore("span.time");

You could also add an element after a selected element by using the After function.

$("div#timeline div.status p").after("<p>15 minutes ago</p>");

And again, there is the InsertAfter method which works the same, but with a reversed syntax.

$("<p>15 minutes ago</p>").insertAfter("div#timeline div.status p");

Removing elements

We can remove elements in the DOM using the Remove method:

$("div#timeline div.status span.username").remove();

Or similarly, using the Empty method:

$("div#timeline div.status span.username").empty();

When you use either of these methods to remove elements from the DOM, you will also remove any child elements that sit within the removed element.

When you remove an element using the Remove or Empty methods, you lose all of the jQuery data that was associated with it.

To remove something, but keep that data, use the Detach method instead.

$("div#timeline div.status span.username").detach();

Why is this important? It’s important because if you wanted to reinsert that element into the DOM, you would of lost all of the associated jQuery data.

Say for example you have it set so whenever a user clicks on a username, the username adds a class and a more info card appears. If you remove the username element and reinsert it using either the Remove or Empty methods, you would lose these abilities. By using the Detach method instead, you preserve this jQuery data.

To remove an element and then reinsert it using either the Remove, Empty or Detach methods, you simply save it into a variable, then reinsert the element using either the Append or Prepend methods.

var username = $("div#timeline div.status span.username").detach();
$("div#timeline div.status").append(username);

Clone

To move elements around the DOM, you can use the Clone method in conjunction with one of the insert methods.

When you use a method like Append to move an element, you remove it from it’s current location and move it to the specified new location.

For example:

$(".one").appendTo(".two");

<div class="timeline">
  <div class="one">Hello</div>
  <div class="two">world</div>
</div>

Would result in:

<div class="timeline">
  <div class="two">
    world
    <div class="one">Hello</div>
  </div>
</div>

Instead, we can make a copy of the element and insert the copy, (leaving the original intact) by also using the Clone method.

$(".one").clone().appendTo(".two");

Results in:

<div class="timeline">
  <div class="one">Hello</div>
  <div class="two">
    world
    <div class="one">Hello</div>
  </div>
</div>

Conclusion

Those were the most common jQuery methods that you will need to manipulate elements in the DOM. Manipulating elements is really one of the building blocks of jQuery, so it’s very important that you become familiar with the methods that we’ve covered so far.

Come back soon as we learn more about the possibilities of jQuery!