Skip to content
Related Articles

Related Articles

HTML | DOM createAttribute() Method

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 13 Jul, 2022

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 values. 

Syntax:

document.createAttribute( attributename )

Example: 

html




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


Output:

  

Example 2: 

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() {
                var id= document.getElementById("gfg");
                var 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
  • Internet Explorer 6
  • Firefox 44
  • Opera 12.1
  • Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!