Open In App

HTML DOM createAttribute() Method

Improve
Improve
Like Article
Like
Save
Share
Report

This createAttribute() method is used to create an attribute with the specified name and returns the attribute object. The attribute.value property is used to set the value of the attribute and the element.setAttribute() method is used to create a new attribute for an element. This method() contains the name of the created attribute as a parameter value. 

Syntax:

document.createAttribute( attributename )

Example: In this example, we will use the createAttribute() method.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>DOM createAttribute Method</title>
    <style>
        .gfg {
            color: green;
            font-weight: bold;
            font-size: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM createAttribute() Method</h2>
    <button onclick="geeks()">
      Submit
      </button>
    <script>
        function geeks() {
            let tag_name =
                document.getElementsByTagName("h1")[0];
            let attr =
                document.createAttribute("class");
            attr.value = "gfg";
            tag_name.setAttributeNode(attr);
        }
    </script>
</body>
   
</html>


Output:

Example 2: In this example, we will use the createAttribute() method.

html




<!DOCTYPE html>
<html>
   
<head>
    <style>
        h1 {
            color: green;
        }
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM createAttribute() Method</h2>
    <a id="gfg">
      Visit GeeksForGeeks...
      </a><br><br>
    <button onclick="geeks()">
      Submit
      </button>
    <script>
        function geeks() {
            let id = document.getElementById("gfg");
            let new_attr = document.createAttribute("href");
            new_attr.value = "#";
            id.setAttributeNode(new_attr);
        }
    </script>
</body>
   
</html>


Output:

Supported Browsers: The browser supported by DOM createAttribute() method are listed below:

  • Google Chrome 1
  • Edge 12
  • Firefox 44
  • Opera 12.1
  • Safari 1


Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads