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.

HTML Example

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

;

Examples

Here you can see 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.

.after()

$("#go").click(function () { $("#div1").after("

Hello!
"); });

.append()

$("#go").click(function () { $("#div1").append("

Hello!
"); });

.appendTo()

$("#go").click(function () { $("

Hello!
").appendTo("#div1"); });

.attr()

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

.before()

$("#go").click(function () { $("#div1").before("

Hello!
"); });

.detach()

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

.empty()

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

.html()

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

.insertAfter()

$("#go").click(function () { $("

Hello!
").insertAfter("#div1"); });

.insertBefore()

$("#go").click(function () { $("

Hello!
").insertBefore("#div1"); });

.prepend()

$("#go").click(function () { $("#div").prepend("

Hello!
"); });

.prependTo()

$("#go").click(function () { $("

Hello!
").prependTo("#div1"); });

.remove()

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

.removeAttr()

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

.replaceAll()

$("#go").click(function () { $("

Hello!
").replaceAll("#div1"); });

.replaceWith()

$("#go").click(function () { $("#div1").replaceWith("

Hello!
"); });

.text()

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