In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > createAttribute (document, XMLDocument)

createAttribute method (document, XMLDocument)

Browser support:

Creates a new attribute node with the specified name.

After the new attribute node is created, use the setAttributeNode or setNamedItem method to add it to an element.
You do not need to work with attribute nodes to add an attribute with the specified name and value to an element; the use of the setAttribute method is simpler.

Syntax:

object.createAttribute (attributeName);

You can find the related objects in the Supported by objects section below.

Parameters:

attributeName

Required. String that specifies the name of the attribute.

Return value:

Returns the newly created attribute object.

Methods for attributes without namespaces:

createAttribute

Creates a new attribute node with the specified name.

getAttribute

Returns the value of the attribute with the specified name from the current element.

getAttributeNode

Returns the attribute node with the specified name from the current element.

getNamedItem

Returns the attribute node with the specified name from the current attributes collection.

hasAttribute

8

Returns whether the current element has an attribute with the specified name or not.

removeAttribute

Removes the attribute with the specified name from the current element.

removeAttributeNode

Removes the specified attribute node from the current element.

removeNamedItem

Removes the attribute with the specified name from the current attributes collection and returns the removed attribute node.

setAttribute

Adds an attribute with the specified name and value to the current element.

setAttributeNode

Adds the specified attribute node to the current element.

setNamedItem

Adds the specified attribute node to the current attributes collection.

Example HTML code 1:

This example shows how to create a new attribute with the createAttribute method:

<head>
    <script type="text/javascript">
        function CreateAttr (button) {
            var newAttr = document.createAttribute ("myAttribute");
            newAttr.value = "The value of the 'myAttribute' attribute";
            button.setAttributeNode (newAttr);

                // alerts the value of the new attribute
            alert (button.getAttribute ("myAttribute"));
        }
    </script>
</head>
<body>
    <button onclick="CreateAttr (this);">Create a new attribute!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A simpler solution with the setAttribute method:

<head>
    <script type="text/javascript">
        function CreateAttr (button) {
            button.setAttribute ("myAttribute", "The value of the 'myAttribute' attribute");
            
                // alerts the value of the new attribute
            alert (button.getAttribute ("myAttribute"));
        }
    </script>
</head>
<body>
    <button onclick="CreateAttr (this);">Create a new attribute!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

Modifying the value HTML attribute with the setAttribute method:

<head>
    <script type="text/javascript">
        function ModifyButtonLabel (button) {
            button.setAttribute ("value", "New label");
        }
    </script>
</head>
<body>
    <input type="button" value="Modify my label!" onclick="ModifyButtonLabel (this);" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example uses the value property to modify the label of a input:button element:

<head>
    <script type="text/javascript">
        function ModifyButtonLabel (button) {
            button.value = "New label";
        }
    </script>
</head>
<body>
    <input type="button" value="Modify my label!" onclick="ModifyButtonLabel (this);" />
</body>