Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the jQuery DOM Manipulation.
jQuery provides different methods to manipulate DOM in an efficient manner. You do not need to write a big code to modify the value of an attribute or to extract a Html code from a paragraph or division.
jQuery provides different methods like .attr(), .html(), and .val() which function as getters, retrieving vital and useful information from DOM elements for later use.
jQuery provides different methods to manipulate DOM in an efficient manner. You do not need to write a big code to modify the value of an attribute or to extract a Html code from a paragraph or division.
jQuery provides different methods like .attr(), .html(), and .val() which function as getters, retrieving vital and useful information from DOM elements for later use.
Content Manipulation
The html() method gets the html contents (inner HTML) of the first matched element.
Syntax
The following below is the syntax for this method -
selector.html()
Example
The following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves the HTML content from the object and .text(val) method sets the value of the object making use of passed parameters -
<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" ).text( content );
} );
} );
</script>
<style>
#division {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div id = "division" style = "background-color: yellow; ">
This is a yellow square
</div>
</body>
</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" ).text( content );
} );
} );
</script>
<style>
#division {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div id = "division" style = "background-color: yellow; ">
This is a yellow square
</div>
</body>
</html>
You can try the above code out to see the result for yourselves.
DOM Element Replacement
You can replace a complete DOM element with the specified Html or DOM elements. The replaceWith( content ) serves this purpose very well.
Syntax
The following below is the syntax for this method -
selector.replaceWith( content )
Example
The following is an example which would replace the division element with "<h1> Hello World </h1>" -
<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 ).replaceWith( "<h1>Hello World</h1>" );
} );
} );
</script>
<style>
#division {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div id = "division" style = "background-color: yellow; ">
This is a yellow square
</div>
</body>
</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 ).replaceWith( "<h1>Hello World</h1>" );
} );
} );
</script>
<style>
#division {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div id = "division" style = "background-color: yellow; ">
This is a yellow square
</div>
</body>
</html>
You can try the above code out to see the result for yourselves.
Removing DOM Elements
There may be a situation when you would want to remove one or more Dom elements from the document. JQuery provides two methods to handle this situation.
The empty() method removes all the child nodes from the set of matched elements where as the remove( expr ) method removes all the matched elements from the DOM.
The empty() method removes all the child nodes from the set of matched elements where as the remove( expr ) method removes all the matched elements from the DOM.
Syntax
The following below is the syntax for this method -
selector.remove( [expr] )
or
selector.empty( )
or
selector.empty( )
Example
The following is an example where elements are being removed as soon as they are clicked -
<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( );
} );
} );
</script>
<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div class = "div" style = "background-color: yellow; "> </div>
<div class = "div" style = "background-color: blue;"></div>
<div class = "div" style = "background-color: green;"></div>
</body>
</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( );
} );
} );
</script>
<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div class = "div" style = "background-color: yellow; "> </div>
<div class = "div" style = "background-color: blue;"></div>
<div class = "div" style = "background-color: green;"></div>
</body>
</html>
You can try the above code out to see the result for yourselves.
You can also read our tutorial post on: Understanding the Basics of jQuery
Inserting DOM Elements
There may be a situation when you would want to insert one or more new DOM elements in your already existing document. JQuery makes available various methods that are used for handling this situation.
The jQuery after(content) method inserts new content after each of the matched elements where as the jQuery before(content) method inserts new content before each of the matched elements.
The jQuery after(content) method inserts new content after each of the matched elements where as the jQuery before(content) method inserts new content before each of the matched elements.
Syntax
The following below is the syntax for this method -
selector.after( content )
or
selector.before( content )
or
selector.before( content )
Example
The following below is an example where <div> elements are inserted before the clicked element -
<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 ).before( 'div class = "div"></div>' );
} );
} );
</script>
<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div class = "div" style = "background-color: yellow; "> </div>
<div class = "div" style = "background-color: blue;"></div>
<div class = "div" style = "background-color: green;"></div>
</body>
</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 ).before( 'div class = "div"></div>' );
} );
} );
</script>
<style>
.div {
width: 60px; margin: 10px; padding: 10px; border: 2px solid #666;
}
</style>
</head>
<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>
<div class = "div" style = "background-color: yellow; "> </div>
<div class = "div" style = "background-color: blue;"></div>
<div class = "div" style = "background-color: green;"></div>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED POST: How to add Attributes to an Element using jQuery
DOM Manipulation Methods
The following table lists down all the methods that can be used to manipulate DOM elements -
| Sr.No. | Method & Description |
|---|---|
| 1 | after( content )
Insert content after each of the matched elements.
|
| 2 | append( content )
Append content to the inside of every matched element.
|
| 3 | appendTo( selector )
Append all of the matched elements to another, specified, set of elements.
|
| 4 | before( content )
Insert content before each of the matched elements.
|
| 5 | clone( bool )
Clone matched DOM Elements, and all their event handlers, and select the clones.
|
| 6 | clone( )
Clone matched DOM Elements and select the clones.
|
| 7 | empty( )
Remove all child nodes from the set of matched elements.
|
| 8 | html( val )
Set the html contents of every matched element.
|
| 9 | html( )
Get the html contents (innerHTML) of the first matched element.
|
| 10 | insertAfter( selector )
Insert all of the matched elements after another, specified, set of elements.
|
| 11 | insertBefore( selector )
Insert all of the matched elements before another, specified, set of elements.
|
| 12 | prepend( content )
Prepend content to the inside of every matched element.
|
| 13 | prependTo( selector )
Prepend all of the matched elements to another, specified, set of elements.
|
| 14 | remove( expr )
Removes all matched elements from the DOM.
|
| 15 | replaceAll( selector )
Replaces the elements matched by the specified selector with the matched elements.
|
| 16 | replaceWith( content )
Replaces all matched elements with the specified HTML or DOM elements.
|
| 17 | text( val )
Set the text contents of all matched elements.
|
| 18 | text( )
Get the combined text contents of all matched elements.
|
| 19 | wrap( elem )
Wrap each matched element with the specified element.
|
| 20 | wrap( html )
Wrap each matched element with the specified HTML content.
|
| 21 | wrapAll( elem )
Wrap all the elements in the matched set into a single wrapper element.
|
| 22 | wrapAll( html )
Wrap all the elements in the matched set into a single wrapper element.
|
| 23 | wrapInner( elem )
Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
|
| 24 | wrapInner( html )
Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
|
Alright guys! We have come to the end of this tutorial on jQuery DOM Manipulation. In our next tutorial post, we will be studying about the above listed DOM methods.
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.
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.