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.
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" ).text( "Hello" );
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" ).html( "<p style='color:red;'><strong>2nd Warning</strong></p>" );
And here it is in action:
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:
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
after() methods do).
The syntax goes like this:
$( ".box" ).append( "<p>Surprise!</p>" );
prependTo() methods do exactly the same thing as
prepend(), but with slightly different syntax.
prependTo() the selector and the content are switched around.
Here's some example code to demonstrate what I mean:
$( "<p>Surprise!</p>" ).appendTo( ".box" );
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
prependTo()) to make a duplicate of an element.
Here's some sample code to demonstrate what I mean:
$( this ).clone().appendTo( ".folder" );
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.
$( ".box" ).empty();
remove() method completely removes an element (and everything inside it) from the DOM.
$( this ).remove();
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.