JQuery DOM Manipulation Methods
jQuery provides methods to manipulate DOM efficient way. You do not need to write big code to modify the value of any element’s attribute or to extract HTML code from a paragraph or division.
jQuery provides methods such as .attr(),.html(), and .val() which act as getters, retrieving information from DOM elements for later use.
To enrich your career and become a jQuery Tutorials professional, visit Tekslate, the global online training platform:" jQuery Training". This course will help you achieve excellence in this field.
jQuery Content Manipulation
The html() method gets the html contents (inner HTML) of the first matched element.
Here is the syntax for the method.
selector.html()
Example
Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content form the object and then .text(val) method sets value of the object using passed parameter.
<html>
<head>
<title>the title</title>
<script type=”type/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document). ready(function()) {
$(“div”).click(function()) {
var content = $(this).html();
$(“#result”).text(content);
}};
}};
</script>
<style>
#division { margin : 10px;padding : 12px;
border:2 px solid # 666;
width:60px;
}
</style>
</head>
<body>
<p> click on the square below:< /p>
<span id=”result”> </span>
<div id=”division” style=”background-color:blue;”>
This is blue square!!
</div>
</body>
</html>
DOM Element Replacement
You can replace a complete DOM element with the specified HTML or DOM elements. The replace with(content) method serves this purpose very well.
Here is the syntax for the method.
selector.replacewith(.content)
Here content is what you want to have instead of the original element. This could HTML or simple text.
Example
<html>
<head>
<title>the title</title>
<script type=”type/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document). ready(function()) {
$(“div”).click(function()) {
$(this).replacewith(“<h1>jQuery is great</h1>”);
});
});
</script>
</script>
<style>
#division { margin : 10px;padding : 12px;
border:2 px solid # 666;
width:60px;
}
</style>
</head>
<body>
<p> click on the square below:< /p>
<span id=”result”> </span>
<div id=”division” style=”background-color:blue;”>
This is blue square!!
</div>
</body>
</html>
Removing DOM Elements
There may be a situation when you would like to remove one or more DOM element s form the document.jQuery provides two methods to handle the situation.
The empty() method remove all child nodes from the set of matched elements where as the method remove(expr) method removes all matched elements from the DOM.
Here is the syntax for the method.
selector.remove([expr])
or
selector.empty()
You can pass optional parameter expr to filter the set of elements to be removed.
Example
Following is an example where elements are being removed as soon as they are clicked:
<html>
<head>
<title>the title</title>
<script type=”type/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document). ready(function()) {
$(“div”).click(function()) {
$(this).remove();
});
});
</script>
<style>
.div { margin : 10px;padding : 12px;
border:2 px solid # 666;
width:60px;
}
</style>
</head>
<body>
<p> click on the square below:< /p>
<span id=”result”> </span>
<div class=”div” style=”background-color:blue;”></div>
<div class=”div” style=”background-color:green;”></div>
<div class=”div” style=”background-color:red;”>
</div>
</body>
</html>
Inserting DOM elements
There may be a situation when you would like to insert new one or more DOM elements in your existing document. jQuery provides various methods to insert elements at various locations.
The after(content) method inserts content after each of the matched elements whereas the method before(content) method inserts content before each of the matched elements.
Here is the syntax for the method:
selector.after(content)
or
selector.before(content)
Here content is what you want to insert. This could be HTML or simple text.
Example
Following is an example where <div> elements are being inserted just before the clicked element :
<html>
<head>
<title>the title</title>
<script type=”type/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document). ready(function()) {
$(“div”).click(function()) {
$(this).before(‘<div class=”div”></div>’);
});
});
</script>
<style>
.div { margin : 10px;padding : 12px;
border:2 px solid # 666;
width:60px;
}
</style>
</head>
<body>
<p> click on the square below:< /p>
<span id=”result”> </span>
<div class=”div” style=”background-color:blue;”></div>
<div class=”div” style=”background-color:green;”></div>
<div class=”div” style=”background-color:red;”>
</body>
</html>
DOM Manipulation Methods
Following table lists down all the methods which you can use to manipulate DOM elements
| Method | Description |
| after(content) | Insert content after-each of the matched elements. |
| append(content) | Append content to the inside of every matched element. |
| appendTo(selector) | Append all of the matched elements to another, specified , set of elements |
| before(content) | Insert content before each of the matched elements |
| clone(bool) | Clone matched DOM elements and all their event handlers, and select the clones. |
| clone() | Clone matched DOM elements and select the clones. |
| empty() | Remove all child nodes from the set of matched elements. |
| html(val) | Set the html contents of every matched element |
| html() | Get the html contents(inner HTML) of the first matched element. |
| insertAfter(sector) | Insert all of the matched elements after another, specified , set of elements. |
| insertBefore(selector) | Insert all of the matched elements before another, specified, set of elements. |
| prepend(content) | Prepend content to the inside of every matched element. |
| prependTo(selector) | Prepend all of the matched elements to another, specified, set of elements. |
| remove(expr) | Removes all matched elements from the DOM. |
| replaceAll(selector) | Replaces the elements matched by the specified selector with the matched elements. |
| replacewith(content) | Replaces all matched elements with the specified HTML or DOM elements |
| text(val) | Set the text contents of all matched elements. |
| text() | Get the combined text contents of all matched elements. |
| wrap(elem) | Wrap each matched element with the specified element. |
| wrap(elem) | Wrap all the elements in the matched set into a single wrapper element. |
| wrapAll(html) | Wrap all the elements in the matched set into a single wrapper element. |
| wrapinner(elem) | Wrap the inner child contents of each matched element(including text nodes) with a DOM element. |
| wrapinner(html) | Wrap the inner child contents of each matched element (including text nodes) with an HTML structure. |
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox