jQuery provides a number of methods to manipulate DOM in efficient way. You do not need to write big and complex code to set or get the content of any HTML element.
jQuery DOM Manipulation
jQuery provides methods such as attr(), html(), text() and val() which act as getters and setters to manipulate the content from HTML documents.
Here are some basic operations which you can perform on DOM elements with the help of jQuery standard library methods −
- Extract the content of an element
- Change the content of an element
- Adding a child element under an existing element
- Adding a parent element above an existing element
- Adding an element before or after an existing element
- Replace an existing element with another element
- Delete an existing element
- Wrapping content with-in an element
We have already covered attr() method while discussing jQuery Attributes and remaining DOM content manipulation methods html(), text() and val() will be discussed in this chapter.
jQuery – Get Content
jQuery provides html() and text() methods to extract the content of the matched HTML element. Following is the syntax of these two methods:
$(selector).html();$(selector).text();
The jQuery text() method returns plain text value of the content where as html() returns the content with HTML tags. You will need to use jQuery selectors to select the target element.
Example
Following example shows how to get the content with the jQuery text() and html() methods:
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#text").click(function(){alert($("p").text());});$("#html").click(function(){alert($("p").html());});});</script></head><body><p>The quick <b>brown fox</b> jumps over the <b>lazy dog</b></p><button id="text">Get Text</button><button id="html">Get HTML</button></body></html>Get Form Fields
jQuery val() method is used to get the value from any form field. Following is simple syntax of this method.
$(selector).val();
Example
Following is another example to show how to get the value an input field with jQuery method val() −
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){alert($("#name").val());});$("#b2").click(function(){alert($("#class").val());});});</script></head><body><p>Name:<input type="text" id="name" value="Zara Ali"/></p><p>Class:<input type="text" id="class" value="Class 12th"/></p><button id="b1">Get Name</button><button id="b2">Get Class</button></body></html>jQuery – Set Content
jQuery html() and text() methods can be used to set the content of the matched HTML element. Following is the syntax of these two methods when they are used to set the values:
$(selector).html(val,[function]);$(selector).text(val,[function]);Here val is he HTML of text content to be set for the element. We can provide an optional callback function to these methods which will be called when the value of the element will be set.
The jQuery text() method sets plain text value of the content where as html() method sets the content with HTML tags.
Example
Following example shows how to set the content of an element with the jQuery text() and html() methods:
<!doctype html><html><head><title>The jQuery Example</title><script src=”https://www.tutorialspoint.com/jquery/jquery-3.6.0.js”></script><script>$(document).ready(function(){$(“#text”).click(function(){$(“p”).text(“The quick <b>brown fox</b> jumps over the <b>lazy dog</b>”);});$(“#html”).click(function(){$(“p”).html(“The quick <b>brown fox</b> jumps over the <b>lazy dog</b>”);});});</script></head><body><p>Click on any of the two buttons to see the result</p><button id=”text”>Set Text</button><button id=”html”>Set HTML</button></body></html>
Set Form Fields
jQuery val() method is also used to set the value from any form field. Following is simple syntax of this method when it is used to set the value.
$(selector).val(val);
Here val is he value to be set for the input field. We can provide an optional callback function which will be called when the value of the field will be set.
Example
Following is another example to show how to set the value an input field with jQuery method val() −
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){$("#name").val("Zara Ali");});$("#b2").click(function(){$("#class").val("Class 12th");});});</script></head><body><p>Name:<input type="text" id="name" value=""/></p><p>Class:<input type="text" id="class" value=""/></p><button id="b1">Set Name</button><button id="b2">Set Class</button></body></html>jQuery – Replacement Elements
The jQuery replaceWith() method can be used to replace a complete DOM element with another HTML or DOM element. Following is the syntax of the method:
$(selector).replaceWith(val);Here val is what you want to have instead of original element. This could be HTML or simple text.
Example
Following is an example where we will replace a <p> element with an <h1> element and then further we replace <h1> element with <h2> element.
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("#b1").click(function(){$("p").replaceWith("<h1>This is new heading</h1>");});$("#b2").click(function(){$("h1").replaceWith("<h2>This is another heading</h2>");});});</script></head><body><p>Click below button to replace me</p><button id="b1">Replace Paragraph</button><button id="b2">Replace Heading</button></body></html>
Leave a Reply