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.

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.

And here it is in action:

<!doctype html>
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $( ".warning" ).html( "<p style='color:red;font-size:larger;'><strong>Hey!</strong> I thought I warned you not to do that!</p>" );
    });
  });
</script>

<button>Click me!</button>
<div class="warning">
  <p>Don't do it!</p>
</div>

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:

And here it is in action:

<!doctype html>
<title>Example</title>
<style>
.box {
  background: orange;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $(this).after( "<div class='box'>New box</div>" );
    });
  });
</script>
<button>Create a box</button>

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:

Working example:

<!doctype html>
<title>Example</title>
<style>
.box {
  background: orange;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $( ".box" ).append( "<p>Surprise!</p>" );
    });
  });
</script>
<button>Add Content</button>

<div class="box">
  <p>Main content.</p>
</div>

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:

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:

Working example:

<!doctype html>
<title>Example</title>
<style>
div {
  color: white;
  padding: 10px;
  margin: 20px;
}
.file {
  background: limegreen;
}
.folder {
  background: gold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( ".file" ).click( function() {
      $( this ).clone().appendTo( ".folder" );
    });
  });
</script>

<div class="file">
  File
</div>

<div class="folder">
  Folder
</div>

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:

Working example:

<!doctype html>
<title>Example</title>
<style>
.box {
  background: orange;
  color: white;
  width: 150px;
  padding: 20px;
  margin: 10px;
}
.inner,
.inner > p {
  border: 1px dotted white;
  padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $( ".box" ).empty();
    });
  });
</script>
<button>Empty the Box!</button>

<div class="box">
  <div class="inner">
    <p>Main content.</p>
    <p>More content.</p>
    <p>Extra content.</p>
  </div>
</div>

The `remove()` and `detach()` Methods

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

Working example:

<!doctype html>
<title>Example</title>
<style>
.box {
  background: orange;
  color: white;
  padding: 10px;
}
p {
  border: 1px dotted white;
  padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( ".box p" ).click( function() {
      $( this ).remove();
    });
  });
</script>

<p>Click a paragraph to remove it.</p>

<div class="box">
  <p>Main content.</p>
  <p>More content.</p>
  <p>Extra content.</p>
</div>

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.

Manipulate the DOM with jQuery

The text() Method

The html() Method

The before() and after() Methods

The append() and prepend() Methods

The appendTo() and prependTo() Methods

The clone() Method

The empty() Method

The remove() and detach() Methods

The `text()` Method

The `html()` Method

The `before()` and `after()` Methods

The `append()` and `prepend()` Methods

The `appendTo()` and `prependTo()` Methods

The `clone()` Method

The `empty()` Method

The `remove()` and `detach()` Methods