Element: setAttributeNode() method

The setAttributeNode() method adds a new Attr node to the specified element.

Syntax

setAttributeNode(attribute)

Parameters

attribute is the Attr node to set on the element.

Return value

The replaced attribute node, if any, returned by this function.

Examples

This example copies the align attribute from one element to another.

HTML

html

<div id="one" align="left">one</div>
<div id="two">two</div>

JavaScript

let d1 = document.getElementById("one");
let d2 = document.getElementById("two");
let a = d1.getAttributeNode("align");

d2.setAttributeNode(a.cloneNode(true));

// Returns: 'left'
alert(d2.attributes[1].value);

Notes

If the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.

This method is seldom used, with Element.setAttribute() usually being used to change element's attributes.

DOM methods dealing with element's attributes:

Not namespace-aware, most commonly used methods	Namespace-aware variants (DOM Level 2)	DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used)	DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used)
`setAttribute` (DOM 1)	`setAttributeNS`	`setAttributeNode`	`setAttributeNodeNS`
`getAttribute` (DOM 1)	`getAttributeNS`	`getAttributeNode`	`getAttributeNodeNS`
`hasAttribute` (DOM 2)	`hasAttributeNS`	-	-
`removeAttribute` (DOM 1)	`removeAttributeNS`	`removeAttributeNode`	-

Specifications

Specification
DOM Standard # dom-element-setattributenode

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`setAttributeNode`	1	12	1	6	≤12.1	1	4.4	18	4	≤12.1	1	1.0

Docs

Docs4dev

Title here