How to use jQuery to Search and Replace HTML elements? - GeeksforGeeks

05 Jun, 2020
In this article, we will discuss on how to use jQuery to search and replace HTML elements. Just like in Vanilla JavaScript (pure JavaScript), jQuery also comes up with selectors for selecting the HTML tags so that we can manipulate the content and properties of the HTML tags. Using the jQuery selectors  we can select elements by tag name, Id name, Class name and also by the location of the tag. 
In the following example, we use two jQuery methods: one to add content to the existing HTML tags and another to add new HTML tags in the body.
1. text( ) : The method selects the tag and the argument to the text function appends text to the pre-existing tags. The argument is HTML safe meaning the content will be exactly copied to the tag irrespective of HTML code passed as an argument.
2. html( ) : The method selects the tag and the argument to the html function adds the content to the selected tag. It is HTML specific meaning that it will check if the argument is an HTML content and add it accordingly.
HTML
<!DOCTYPE html><html><head>    <title>jQuery!!!</title>    <script type="text/javascript" src=    "https://code.jquery.com/jquery-3.5.1.min.js">     </script>    <style type="text/css">        h1 {            color: green;        }        body {            text-align: center;        }    </style></head><body>    <h1>Geeks Geeks</h1>    <br>    <button class="one">Correct Me!</button>    <br>    <br>    <button class="two">Add Me!</button>    <br>    <span></span>    <script type="text/javascript">        $(".one").click(function()        {            $("h1").text("Geeks for Geeks!");        });          $(".two").click(function()        {            $("span").html("<h3>You can also Contribute.</h3>");        });    </script></body></html>
Output: Page after running the above HTML file
After Clicking the “Correct Me!” button
After clicking the “Add Me!” Button
 
Other Important jQuery functions : 
3. css( ) : The method is used to select and manipulate the CSS properties of the element.
4. attr( ) :  The method returns and changes the attribute of an HTML tag.
5. val( ) :  The method returns value of all the tag which have the value attribute. It can also set the value by passing argument to it.
If one wants to add multiple CSS properties to a tag then the more appropriate method is to give properties to a class and then remove, add or toggle class into a tag. This property makes jQuery very easy to use and handle.
jQuery provides addClass( ),  removeClass( ),  and toggleClass( ) to add, remove and toggle a class to a tag in HTML.
HTML-Misc
jQuery-Selectors
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?