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", "GeeksforGeeks");
});Example:
HTML
<!DOCTYPE HTML> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</script>
<script>
$(document).ready(function () {
$("#add-attr").click(function () {
$("#addAttr").attr("placeholder", "GeeksforGeeks");
});
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</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>
|
Output: