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.
| Method | Description | Syntax |
|---|---|---|
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
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("<div>Hello!</div>");
});.append()
$("#go").click(function () {
$("#div1").append("<div>Hello!</div>");
});.appendTo()
$("#go").click(function () {
$("<div>Hello!</div>").appendTo("#div1");
});.attr()
$("#go").click(function () {
$("#go").attr({"width":"96","height":"96"});
});.before()
$("#go").click(function () {
$("#div1").before("<div>Hello!</div>");
});.detach()
$("#go").click(function () {
$("#div").detach();
});.empty()
$("#go").click(function () {
$("#div").empty();
});.html()
$("#go").click(function () {
$("#div").html("<em>Hello!</em>");
});.insertAfter()
$("#go").click(function () {
$("<div>Hello!</div>").insertAfter("#div1");
});.insertBefore()
$("#go").click(function () {
$("<div>Hello!</div>").insertBefore("#div1");
});.prepend()
$("#go").click(function () {
$("#div").prepend("<div>Hello!</div>");
});.prependTo()
$("#go").click(function () {
$("<div>Hello!</div>").prependTo("#div1");
});.remove()
$("#go").click(function () {
$("#div").remove();
});.removeAttr()
$("#go").click(function () {
$("#div").removeAttr("style");
});.replaceAll()
$("#go").click(function () {
$("<div><strong>Hello!</strong></div>").replaceAll("#div1");
});.replaceWith()
$("#go").click(function () {
$("#div1").replaceWith("<div>Hello!</div>");
});.text()
$("#go").click(function () {
$("#div1").text("<b>Hello!</b> // Text, not HTML");
});
