HTML - DOM Element setAttributeNode() Method

Quiz

The HTML DOM Element setAttributeNode() method is used to add (or define) an attribute node to a specific element and update any existing attribute node with the same name.

An attribute node in the Document Object Model (DOM) represents an attribute of an element. Attributes provide additional information about an element.

Syntax

Following is the syntax of the HTML DOM Element setAttributeNode() method −

element.setAttributeNode(newAttrNode);

Parameters

This method accepts a single parameter as mentioned below:

Parameter	Description
newAttrNode	The new node you want to define for the particular element.

Return Value

This method does not always return a value; instead, it sets a new attribute node value for the element. However, if an attribute is updated, it returns an 'Attr' object that holds the updated attribute node.

Example 1: Setting Class Attribute Node on Div Element

The following program demonstrates using the HTML DOM Element setAttributeNode() method. It adds (sets) the class attribute node on a <div> element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element setAttributeNode()</title>
<style>
   .setAttr {
       color: red;
   }
</style>
</head>
<body>
<h1>HTML DOM Element setAttributeNode() Method</h1>
<p>Click button to set the class attribute to a div element.</p>
<button onclick="myFunction()">Change</button>
<script>
   function myFunction() { 
      var div_ele = document.createElement('div');
      div_ele.textContent = "This is a dynamically created div element.";
      // Create a new class attribute node
      var clsatr = document.createAttribute('class');
      clsatr.value = 'setAttr';
      div_ele.setAttributeNode(clsatr); 
      document.body.appendChild(div_ele);
   }
</script>
</body>
</html>

The above program adds a class attribute node to a <div> element.

Example 2: Updating the Attribute Node

Following is another example of the HTML DOM Element setAttributeNode() method. We use this method to update the existing attribute node of an <p> element −

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    background-color: green;
    padding: 10px;
    border: 1px solid black;
    color: white;
  }
</style>
</head>
<body>
<p id="myParagraph" class="original">This is a paragraph element.</p>
<p>Click the below button to update attribute node</p>
<button onclick="updateAttribute()">Update Attribute</button>
<p id="res"></p>
<script>
  function updateAttribute() {
    var attr = document.createAttribute("class");
    attr.value = "highlight";
    var element = document.getElementById("myParagraph");
    element.setAttributeNode(attr);
    document.getElementById('res').innerHTML = "Attribute node updated."
  }
</script>
</body>
</html>

When the program is executed, it updates the existing attribute node once the button is clicked.

Example 3: Setting Id Attribute Node on <p> Element

In the example below, we use this function to add an id attribute node to a <p> element:

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element setAttributeNode()</title>
<style>
   #setAttr {
       color: green;
   }
</style>
</head>
<body>
<h1>HTML DOM Element setAttributeNode() Method</h1>
<p>Click button to set the id attribute to a "p" element.</p>
<button onclick="myFunction()">Change</button>
<p id="res"></p>
<script>
   function myFunction() {
      let p_ele = document.querySelector("p");
      var id_atr = document.createAttribute('id');
      id_atr.value = 'setAttr';
      p_ele.setAttributeNode(id_atr);
      document.getElementById('res').innerHTML = "id attribute node added.";
   }
</script>
</body>
</html>

The above program will add an "id" attribute node to a "p" element.

Supported Browsers

Method
setAttributeNode()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page