How to add attributes to an HTML element in jQuery?

0 0 1 minute read

Given an HTML document containing some elements and the task is to add the attributes to the HTML elements.

Approach: Given an HTML document containing <label>, <input> and <button> elements. The <input> element contains the type and id attribute. When user click on the button, the jQuery function is called. We use $(selector).attr() method to add the attributes. Here, we are adding the placeholder attribute to the input field.

Syntax:

$("#add-attr").click(function () {
    $("#addAttr").attr("placeholder", "zambiatek");
});

Example:

HTML

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("#add-attr").click(function () { 
                $("#addAttr").attr("placeholder", "zambiatek"); 
            }); 
        }); 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        zambiatek 
    </h1> 
  
    <h4> 
        How to add attributes to an HTML element in jQuery? 
    </h4> 
  
    <label for="addAttr"></label> 
    <input type="text" id="addAttr"> 
  
      <button id="add-attr">Add Placeholder Attribute</button> 
</body> 
  
</html>