Did you find this useful?
Socialize it today.


jQuery DOM Manipulation Methods

Thursday, July 12, 2012

jQuery provides methods to easily and effectively manipulate elements in the Document Object Model (DOM). jQuery allows you to navigate and manipulate your documents. DOM navigation and manipulation using standard JavaScript requires a bit more work than using the jQuery methods. We will take a look at the more common methods in this article.


Methods

The methods listed in the following table are commonly used for DOM manipulation.


MethodDescriptionSyntax
after()Inserts content after selected elements$(selector).after(content)
append()Inserts content within, at the end of the selected elements$(selector).append(content)
appendTo()Inserts content within, at the end of the selected elements$(content).appendTo(selector)
attr()Sets or returns an attribute and value of selected elements$(selector).attr(attribute,value)
before()Inserts content before selected elements$(selector).before(content)
detach()Removes selected elements, but keeps jQuery data.$(selector).detach()
empty()Removes child elements and content from selected element$(selector).empty()
html()Sets or returns the content of selected elements$(selector).html(content)
insertAfter()Inserts HTML after selected elements$(content).insertAfter(selector)
insertBefore()Inserts HTML before selected elements$(content).insertBefore(selector)
prepend()Inserts content within, at the beginning of selected elements$(selector).prepend(content)
prependTo()Inserts content within, at the beginning of selected elements$(content).prependTo(selector)
remove()Removes selected elements from the DOM$(selector).remove()
removeAttr()Removes an attribute from selected elements$(selector).removeAttr(attribute)
replaceAll()Replaces selected elements with new content$(content).replaceAll(selector)
replaceWith()Replaces selected elements with new content$(selector).replaceWith(content)
text()Sets or returns the text content of selected elements$(selector).text(content)


HTML Example

We will use the following HTML for the examples listed below.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ; 
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>


Examples

Click the image button to try the various DOM manipulation methods below. You will note that some of the methods below produce the same results. However, while that is the case, some methods may have more flexibility with regard to passing additional parameters. For detailed information about each method, you may want to visit jQuery.com.


 $("#go").click(function () {
        $("#div1").after("<div>Hello!</div>");
   });


go arrow
.after()


 $("#go").click(function () {
        $("#div1").append("<div>Hello!</div>");
   });


go arrow
.append()


 $("#go").click(function () {
        $("<div>Hello!</div>").appendTo("#div1");
   });


go arrow
.appendTo()


 $("#go").click(function () {
        $("#go").attr({"width":"96","height":"96"});
   });


go arrow
.attr()


 $("#go").click(function () {
        $("#div1").before("<div>Hello!</div>");
   });


go arrow
.before()


 $("#go").click(function () {
        $("#div").detach();
   });


go arrow
.detach()


 $("#go").click(function () {
        $("#div").empty();
   });


go arrow
.empty()


 $("#go").click(function () {
        $("#div").html("<em>Hello!</em>");
   });


go arrow
.html()


 $("#go").click(function () {
        $("<div>Hello!</div>").insertAfter("#div1");
   });


go arrow
.insertAfter()


 $("#go").click(function () {
        $("<div>Hello!</div>").insertBefore("#div1");
   });


go arrow
.insertBefore()


 $("#go").click(function () {
        $("#div").prepend("<div>Hello!</div>");
   });


go arrow
.prepend()


 $("#go").click(function () {
        $("<div>Hello!</div>").prependTo("#div1");
   });


go arrow
.prependTo()


 $("#go").click(function () {
        $("#div").remove();
   });


go arrow
.remove()


 $("#go").click(function () {
        $("#div").removeAttr("style");
   });


go arrow
.removeAttr() // Click to remove style


 $("#go").click(function () {
        $("<div><strong>Hello!</strong></div>").replaceAll("#div1");
   });


go arrow
.replaceAll()


 $("#go").click(function () {
        $("#div1").replaceWith("<div>Hello!</div>");
   });


go arrow
.replaceWith()


 $("#go").click(function () {
        $("#div1").text("<b>Hello!</b> // Text, not HTML");
   });


go arrow
.text()


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor JavaScript and jQuery: The Missing Manual Professional jQuery