jQuery DOM manipulation methods

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery DOM manipulation methods

In today’s tutorial we will learn how to manipulate DOM elements. We can add elements one after another, replace one element with another one, get properties such as width or height or remove completely elements from the DOM.

A few of these methods — such as .attr().html(), and .val() — also act as “getters”, retrieving information from DOM elements for later use.

We will structure these manipulation methods by their purpose like this:

– DOM replacement

– DOM copying

– DOM removal

– DOM insertion

– DOM getters

HTML structure

Before we begin, as we already did in the past, we will setup a DOM structure for the sake of this tutorial and we will apply methods on it.

Now let’s dig in the methods that we talked about.

DOM replacement

The methods from this area are used to remove content from the DOM and replace it with new content. Here we have some various methods like:

.html()

This method works both as setter and getter (you can either set or get elements from the DOM). Let’s see an example on our html structure above.

Let’s say we want to get all the lists from within the <ul> inside the div with the class of “wrapper”.

Did you lost me?

Again, all the lists that are inside the <ul> in their HTML format. Imagine you will use them in another part of your website. Get them from here, and put them in other place. Sounds good right? So, first we construct the selector for catching the desired elements and then call the method for grabbing them (getter).

Perfect, we select what we wanted and set all that content in a variable called “html”.

Now we want that html content that we selected to put it let’s say inside the “body” element and replace all the current content with the new one stored in the “html” variable.

Good. Calling the .html() method with a string parameter, acts as a setter and sets content, not retrieve! Simple as that!

.text()

This method is very similar with .html(). This is getting or setting text inside divs or other elements. If we want to get the text from inside the div with the class of “box”, we call it like we did with .html(). We write the selector and call the method.

Without a parameter it acts as a getter. The above example returns “yourhowto.net is awesome” (see the html structure from the top of this page).

.val()

This method is used to get or set values mostly for inputs, textareas or similar elements. It acts exactly as the other two from above ( .html(), .text() ), called on specific DOM elements.

DOM copying

.clone()

This method allows us to create copies of existing DOM elements. Example:

Above we obtained a clone of our div with the class of “box”.  This method can be called with a boolean parameter indicating whether event handlers should be copied along with the elements.

DOM removal

.remove()

This method is used to remove elements from the DOM. We use .remove() when we want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

There, the element won’t be in the DOM after we call this method.

DOM insertion

These methods are used to new element(s) inside every matched element.

.append()

As we talked in a past tutorial about it, this new method appends an element at the end of another one.

We added another list in the bottom of the ul element.

.prepend()

Exactly as .append() but it will put the new element in the top of the <ul> not in the bottom as .append() did.

.after()

With this one, you can specify the exact place where you want the new element to be added.

We add after the div with the class of “box” the specified paragraph as a parameter.

DOM getters

There are some special methods available in jQuery for getting other elements properties such as width or height.

.width()

Get the current computed width for the first element in the set of matched elements.

The above example returns the width of the browser viewport.

Returns the width of the HTML document.

.height()

Works exactly like the .width() method, but it is returning the height property of the element.

Summary

In this tutorial, we presented some of the most used methods for DOM manipulation with jQuery. Here is an entire list of methods used for DOM manipulation with jQuery. Stay tuned for the next tutorial in which we will talk about events handling.

 

Request an article ←