jQuery DOM manipulation methods
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>just a title passing by...</title> </head> <body> <div class="box">yourhowto.net is awesome</div> <div class="wrapper"> <ul> <li class="item1">list item 1</li> <li class="item2">list item 2</li> <li class="item3">list item 3</li> </ul> </div> </body> </html> |
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).
1 |
var html = $("div.wrapper ul").html(); |
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.
1 |
$("body").html(html); |
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.
1 |
$(".box").text(); |
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:
1 |
var myClone = $(".box").clone(); |
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.
1 |
$(".box").remove(); |
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.
1 |
$("ul").append("<li class="item4">list item 4</li>"); |
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.
1 |
$(".box").after("<p>Test</p>"); |
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.
1 |
$( window ).width(); |
The above example returns the width of the browser viewport.
1 |
$(document).width(); |
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.