How to Add and Remove HTML Attributes with jQuery? - Coding

Using jQuery, we can dynamically add and remove HTML attributes such as placeholder, style, and more to enhance the interactivity and functionality of web elements based on user actions. We will explore two different approaches to adding and removing HTML attributes with jQuery.

Below are the possible approaches to add and remove HTML attributes with jQuery:

Table of Content

Using attr() and removeAttr() Methods
Using prop() and removeProp() Methods

Using attr() and removeAttr() Methods

In this approach, we are using jQuery’s attr() method to dynamically add inline CSS styles to the target element, changing its color and font size based on user interaction. Similarly, we use the removeAttr() method to remove the inline styles, restoring the default appearance of the element.

Example: The below example uses attr() and removeAttr() Methods to add and remove HTML attributes with jQuery.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 1</title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Using attr() and removeAttr() Methods</h1>
        <button id="addAttrBtn">
                Add Attribute</button>
        <button id="removeAttrBtn">
                 Remove Attribute</button>
        <br><br>
        <div id="targetDiv" class="target">GeeksforGeeks</div>
    </div>
    <script>
        $(document).ready(function () {
            $("#addAttrBtn").click(function () {
                $("#targetDiv").attr("style",
                                     "color:green; font-size:24px;");
            });
            $("#removeAttrBtn").click(function () {
                $("#targetDiv").removeAttr("style");
            });
        });
    </script>
</body>

</html>

Output:

Using prop() and removeProp() Methods

In this approach, we are using jQuery’s prop() method to dynamically add the placeholder attribute with text to the input field when the “Add Placeholder” button is clicked. Conversely, we use the removeAttr() method to remove the placeholder attribute from the input field when the “Remove Placeholder” button is clicked.

Example: The below example uses prop() and removeProp() Methods to add and remove HTML attributes with jQuery.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 2</title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Using prop() and removeAttr() Methods</h1>
        <input type="text" id="inputField"
               style="margin-bottom:10px;" />
        <br>
        <button id="addAttrBtn">
                Add Placeholder</button>
        <button id="removeAttrBtn">
                Remove Placeholder</button>
    </div>
    <script>
        $(document).ready(function () {
            $("#addAttrBtn").click(function () {
                $("#inputField").prop("placeholder",
                                      "Enter text...");
            });

            $("#removeAttrBtn").click(function () {
                $("#inputField").removeAttr("placeholder");
            });
        });
    </script>
</body>

</html>

Output:

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
How to Check if the Response of a Fetch is a JSON Object in JavaScript?
Strapi vs WordPress
How to Perform Static Code Analysis in PHP?
What is onerror() Method in JavaScript?
Java vs .NET vs Python: Choosing the Best

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17