Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In our previous tutorial, we dropped a complete list of DOM manipulation methods available in jQuery. So in this tutorial, we are going to be discussing about each one of them one after the other.

This tutorial contains 24 different methods with series of examples, so i will advice you take your time to read through and also ask your questions through the comment box below where necessary.

after(content) Method

The after(content) method inserts content after each of the matched elements.

Syntax

The following below is the syntax to use this method -

selector.after( content )

Parameter Details

Here is the description of all the parameters used by this methods -

content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

append( content ) Method

jQuery append( content ) method appends content to the inside of every matched element.

Syntax

The following below is the syntax to use this method -

selector.append( content )

Parameter Details

Here is the description of all the parameters used by this methods -

content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

prepend( content ) Method

jQuery prepend( content ) method prepends content to the inside of every matched element.

You can compare it with append( content ) method.

Syntax

The following below is the syntax to use this method -

selector.prepend( content )

Parameter Details

Here is the description of all the parameters used by this methods -

content - Content to insert after each matched element. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

RECOMMENDED Post: jQuery DOM Traversing Methods with examples

appendTo( selector ) Method

The jQuery appendTo( selector ) method appends all the matched elements to another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.appendTo( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

selector - This is the target to which the content will be appended to.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

prependTo( selector ) Method

The prependTo( selector ) method prepends all the matched set of elements to another specified set of elements.

Compare it with the appendTo( selector ) method.

Syntax

The following below is the syntax to use this method -

selector.prependTo( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

selector - This is the target to which the content will be pretended to.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

before( content ) Method

jQuery before( content ) method inserts content before each of the matched elements.

Syntax

The following below is the syntax to use this method -

selector.before( content )

Parameter Details

Here is the description of all the parameters used by this methods -

content - This is the content to insert before each target. This could be HTML or text content.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

clone( bool ) Method

The clone( bool ) method clones matched DOM Elements, and all their event handlers and select the clones. This is useful for moving copies of the elements, and their events, to a new location in the DOM.

Syntax

The following below is the syntax to use this method -

selector.clone( bool )

Parameter Details

Here is the description of all the parameters used by this methods -

bool - Set to true to enable cloning of event handlers.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

clone( ) Method

The jQuery clone( ) method clones matched DOM Elements, and also selects the clones. This is useful for moving copies of the elements, to another location in the DOM.

Syntax

The following below is the syntax to use this method -

selector.clone( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

empty( ) Method

The empty( ) method removes all the child nodes from the set of matched elements.

Syntax

The following below is the syntax to use this method -

selector.empty( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

RECOMMENDED Post: The Complete List of Selectors in jQuery

html( val ) Method

The jQuery html( val ) method sets the html content of every matched elements. This property is not available by XML documents.

Syntax

The following below is the syntax to use this method -

selector.html( val )

Parameter Details

Here is the description of all the parameters used by this methods -

val - This is the html content to be set.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

html( ) Method

The html( ) method gets the html content(innerHTML) of the first matched element. This property is not available by XML documents.

Syntax

The following below is the syntax to use this method -

selector.html( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
var content = $( this ).html( );
$( "#result" ).html( content );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<p id = "result">This is the Test</p>

<div class = "div" style = "background-color: yellow; ">
<h1>This is Square One</h1>
</div>
<div class = "div" style = "background-color: blue;">
<h1>This is Square Two</h1>
</div>
<div class = "div" style = "background-color: purple;">
<h1>This is Square Three</h1>
</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

insertAfter( selector ) Method

The insertAfter( selector ) method inserts all the matched elements, after another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.insertAfter( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

selector - The content after which the selected elements is inserted.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

insertBefore( selector ) Method

The jQuery insertBefore(selector) method inserts all of the matched elements, before another specified set of elements.

Syntax

The following below is the syntax to use this method -

selector.insertBefore( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

selector - Content before which the selected elements is inserted.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

remove( expr ) Method

remove( expr ) method removes all the matched elements from the DOM. This does not remove them from the jQuery object, allowing you to use the matched elements further.

Syntax

The following below is the syntax to use this method -

selector.remove( expr )

Parameter Details

Here is the description of all the parameters used by this methods -

expr - An optional jQuery expression to filter the set of elements to be removed.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
$( this ).remove( ).appendTo( "#result" );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<p id = "result">This is the First Test</p>
<hr />

<div class = "div" style = "background-color: yellow; ">Five</div>
<div class = "div" style = "background-color: blue;">Six</div>
<div class = "div" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

replaceAll( selector ) Method

The replaceAll( selector ) method replaces the elements matched by the specified selectors with the matched elements.

Syntax

The following below is the syntax to use this method -

selector.replaceAll( selector )

Parameter Details

Here is the description of all the parameters used by this methods -

selector - The elements to find and replace the matched elements with.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

replaceWith( content ) Method

The replaceWith(content) method replaces all the matched elements with the specified HTML or DOM elements. This returns the element that was just replaced, which has been removed from the DOM.

Syntax

The following below is the syntax to use this method -

selector.replaceWith( content )

Parameter Details

Here is the description of all the parameters used by this methods -

content - Content to replace matched elements with.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

text( val ) Method

The jQuery text( val ) method gets the combined text contents of all matched elements.

Syntax

The following below is the syntax to use this method -

selector.text( val )

Parameter Details

Here is the description of all the parameters used by this methods -

val - This is the text value to be set.

Example

Following example below shows a simple usage of this method -

You can try the above code out to see the result for yourselves.

RECOMMENDED: JavaScript Math Methods

text( ) Method

The jQuery text( ) method gets the combined text contents of all the matched elements. The result is a string that contains combined text contents of all matched elements. The method works both on HTML and XML documents.

Syntax

The following below is the syntax to use this method -

selector.text( )

Parameter Details

Here is the description of all the parameters used by this methods -

Na.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
var content = $( this ).text( );
$( "#result" ).text( content );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<p id = "result">This is the First Test</p>

<div class = "div" style = "background-color: yellow; ">
<h1>This is square One</h1>
</div>
<div class = "div" style = "background-color: blue;">
<h1>This is square Two</h1>
</div>
<div class = "div" style = "background-color: purple;">
<h1>This is square Three</h1>
</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

wrap( elem ) Method

The jQuery wrap( elem ) method wraps each matched element with the specified element.

Syntax

The following below is the syntax to use this method -

selector.wrap( elem )

Parameter Details

Here is the description of all the parameters used by this methods -

elem - A DOM element that will be wrapped around each target.

Example

Following example below shows a simple usage of this method. This wraps destination square with a square when any of the square gets a click -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( ".inner" ).click( function( ) {
var newcolor = $( this ).css( 'background-color' );
$( "#destination" ).wrap( "div class = 'newinner'
style = 'border: 3px solid "+newcolor +" ';></div>" );
} );
} );
</script>

<style>
.inner {
margin: 10px; padding: 10px; border: 3px solid #666;
}
.newinner { padding: 15px; }
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "inner" id = "destination">Wrap this</div>
<div class = "inner" style = "background-color: yellow; ">Five</div>
<div class = "inner" style = "background-color: blue;">Six</div>
<div class = "inner" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

RECOMMENDED Post: The ultimate guide to JavaScript Date object

wrap( html ) Method

The jQuery wrap( html ) method wraps each matched element with the specified HTML content.

This wrapping process is most useful for the adding of additional structure into a document, without ruining the original qualities of the document.

Syntax

The following below is the syntax to use this method -

selector.wrap( html )

Parameter Details

Here is the description of all the parameters used by this methods -

html - A string of HTML that will be created on the fly and then wrapped around each target.

Example

Following example below shows a simple usage of this method. This wraps destination square with a square when any of the square gets a click -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( ".div" ).click( function( ) {
var content = '<div class = "div"></div>';
$( "#destination" ).wrap( content );
} );
} );
</script>

<style>
.inner {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
.newinner { padding: 15px; }
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "inner" id = "destination">Wrap this</div>
<div class = "inner" style = "background-color: yellow; ">Five</div>
<div class = "inner" style = "background-color: blue;">Six</div>
<div class = "inner" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

wrapAll( elem ) Method

wrapAll( elem ) method wraps all the elements in the matched set to a single wrapper element.

Syntax

The following below is the syntax to use this method -

selector.wrapAll( elem )

Parameter Details

Here is the description of all the parameters used by this methods -

elem - A DOM element that will be wrapped around the target.

Example

Following example below shows a simple usage of the method. This wraps all the squares with a new square -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( ".wrapper" ).click( function( ) {
var newcolor = $( this ).css( 'background-color' );
$( ".inner" ).wrapAll( "div class = 'newinner'
style = 'border: 3px solid "+newcolor +" ';></div>" );
} );
} );
</script>

<style>
.wrapper {
margin: 10px; padding: 10px; border: 3px solid #666;
}
.inner { padding: 15px; border: 3px solid #666; }
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "inner" id = "destination">Element One</div>
<div class = "inner" id = "destination">Element Two</div>
<div class = "inner" id = "destination">Element Three</div>
<div class = "wrapper" style = "background-color: yellow; ">Five</div>
<div class = "wrapper" style = "background-color: blue;">Six</div>
<div class = "wrapper" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

RECOMMENDED: Array object with examples

wrapAll( html ) Method

wrapAll( html ) method wraps all the elements in the matched set to a single wrapper element.

Syntax

The following below is the syntax to use this method -

selector.wrapAll( html )

Parameter Details

Here is the description of all the parameters used by this methods -

html - A string of HTML that will be created on the fly and then wrapped around each target.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "div" ).click( function( ) {
var content = '<div class = "div"></div>';
$( "div" ).wrapAll( content );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "div" id = "destination">This is First Test</div>
<div class = "div" style = "background-color: yellow; ">Five</div>
<div class = "div" style = "background-color: blue;">Six</div>
<div class = "div" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

wrapInner( elem ) Method

wrapInner( elem ) method wraps the inner child contents of each of the matched elements (including text nodes) with a DOM element.

Syntax

The following below is the syntax to use this method -

selector.wrapInner( elem )

Parameter Details

Here is the description of all the parameters used by this methods -

elem - A DOM element that will be wrapped around the target.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "div" ).click( function( ) {
$( this ).wrapInner( document.createElement( "b" ) );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "div" id = "destination">This is First Test</div>
<div class = "div" style = "background-color: yellow; ">Five</div>
<div class = "div" style = "background-color: blue;">Six</div>
<div class = "div" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

wrapInner( html ) Method

wrapInner( html ) method wraps the inner child contents of each of the matched elements (including text nodes) with an Html structure.

Syntax

The following below is the syntax to use this method -

selector.wrapInner( html )

Parameter Details

Here is the description of all the parameters used by this methods -

html - A string of HTML that will be created on the fly and wrapped around the target.

Example

Following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "div" ).click( function( ) {
var content = "<b></b>";
$( this ).wrapInner( content );
} );
} );
</script>

<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 3px solid #666;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>

<div class = "div" id = "destination">This is First Test</div>
<div class = "div" style = "background-color: yellow; ">Five</div>
<div class = "div" style = "background-color: blue;">Six</div>
<div class = "div" style = "background-color: purple;">Seven</div>
</body>
</html>

You can try the above code out to see the result for yourselves.

Alright guys! We have come to the end of this tutorial on jQuery DOM Manipulation Methods. In our next tutorial post, we will be discussing about the Event Handling in jQuery.

Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.

Understanding DOM Manipulation Methods in jQuery

after(content) Method

Syntax

Parameter Details

Example

append( content ) Method

Syntax

Parameter Details

Example

prepend( content ) Method

Syntax

Parameter Details

Example

appendTo( selector ) Method

Syntax

Parameter Details

Example

prependTo( selector ) Method

Syntax

Parameter Details

Example

before( content ) Method

Syntax

Parameter Details

Example

clone( bool ) Method

Syntax

Parameter Details

Example

clone( ) Method

Syntax

Parameter Details

Example

empty( ) Method

Syntax

Parameter Details

Example

html( val ) Method

Syntax

Parameter Details

Example

html( ) Method

Syntax

Parameter Details

Example

insertAfter( selector ) Method

Syntax

Parameter Details

Example

insertBefore( selector ) Method

Syntax

Parameter Details

Example

remove( expr ) Method

Syntax

Parameter Details

Example

replaceAll( selector ) Method

Syntax

Parameter Details

Example

replaceWith( content ) Method

Syntax

Parameter Details

Example

text( val ) Method

Syntax

Parameter Details

Example

text( ) Method

Syntax

Parameter Details

Example

wrap( elem ) Method

Syntax

Parameter Details

Example

wrap( html ) Method

Syntax

Parameter Details