Manipulate the DOM with jQuery

Insert, remove, and replace DOM elements dynamically using jQuery.

jQuery includes a number of methods for manipulating the document object model (DOM). This enables you to do things like:

  • Get an attribute value from an HTML element.
  • Set an attribute on an HTML element.
  • Get an element's styles.
  • Set an element's styles.
  • Insert, copy, and remove HTML elements.
  • Insert, copy, and remove whole groups of HTML elements.

These jQuery methods are compatible with all major browsers, so you don't need to write code to deal with inconsistencies among browsers.

The text() Method

The text() method enables you to get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

The following example sets the text of the element with an ID of #intro to Hello.

$( "#intro" ).text( "Hello" );

The html() Method

The html() method enables you to get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

The following example sets the HTML content of the .warning class.

$( ".warning" ).html( "<p style='color:red;'><strong>2nd Warning</strong></p>" );

And here it is in action:

The before() and after() Methods

The before() method enables you to insert content before each element in the set of matched elements. The after() method inserts content after each element in the set of matched elements.

Here's an example of the after() method adding a div element after the current element:

$(this).after( "<div class='box'>New box</div>" );

And here it is in action:

The append() and prepend() Methods

The append() and prepend() methods append/prepend content to the end of each element in the set of matched elements (as opposed to before/after each element as the before() and after() methods do).

The syntax goes like this:

$( ".box" ).append( "<p>Surprise!</p>" );

Working example:

The appendTo() and prependTo() Methods

The appendTo() and prependTo() methods do exactly the same thing as append() and prepend(), but with slightly different syntax.

With appendTo() and prependTo() the selector and the content are switched around.

Here's some example code to demonstrate what I mean:

$( "<p>Surprise!</p>" ).appendTo( ".box" );

The clone() Method

The clone() method allows you to clone an element. It copies the matched elements as well as all of their descendant elements and text nodes.

You can use clone() with another insertion method (such as appendTo() or prependTo()) to make a duplicate of an element.

Here's some sample code to demonstrate what I mean:

$( this ).clone().appendTo( ".folder" );

Working example:

The empty() Method

Use the empty() method to remove all child nodes of an element. This includes all child elements and their descendant elements plus any text inside the set of matched elements.

Example code:

$( ".box" ).empty();

Working example:

The remove() and detach() Methods

The remove() method completely removes an element (and everything inside it) from the DOM.

$( this ).remove();

Working example:

The detach() method works the same way, except that it keeps all jQuery data and events associated with the removed elements. This can be useful if you intend to reinsert the element back into the DOM at a later stage.

There are many more methods that can be used to manipulate the DOM. I'll be covering many of these throughout the rest of this tutorial.