JavaScript Element setAttributeNode() Method

What You’ll Learn

Element.setAttributeNode() is an instance method that adds an Attr node to an element. Learn MDN’s clone- lang example, document.createAttribute(), the replaced-node return value, when to prefer setAttribute(), and five try-it labs aligned with MDN.

Introduction

Day-to-day code usually writes attributes with element.setAttribute("lang", "en-US"). setAttributeNode() works at the Attr node level: you pass an actual Attr object instead of a name/value pair.

MDN recommends this API when you already have (or need to build) an attribute node—for example cloning lang from one element onto another. If you only need to set a string value, prefer setAttribute().

This page is part of JavaScript Element. Pair with getAttributeNode(), setAttribute(), and removeAttributeNode().

Understanding the setAttributeNode() Method

Calling el.setAttributeNode(attr) attaches the given Attr to el. If an attribute with the same name already exists, that attribute is replaced and the old node is returned (MDN).

• It is an instance method on Element.
• Takes one parameter: an Attr node to add (MDN).
• Returns the replaced Attr node, if any (MDN).
• Prefer setAttribute() when you do not need to work with Attr nodes (MDN).
• Clone before reusing an Attr from another element.
• Pairs with getAttributeNode() and removeAttributeNode().

📝 Syntax

General form of Element.setAttributeNode (MDN):

setAttributeNode(attribute)

Parameters

Return value

Notes

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

Common patterns

// MDN — clone lang from one element to another
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNode("lang");
d2.setAttributeNode(a.cloneNode(true));

// Create a new Attr from scratch
const attr = document.createAttribute("data-role");
attr.value = "admin";
el.setAttributeNode(attr);

// Capture the replaced node (if any)
const old = el.setAttributeNode(document.createAttribute("title"));
// old is the previous title Attr, or empty if none existed

Examples Gallery

Examples follow MDN Element.setAttributeNode() patterns. Use View Output or Try It Yourself for each case.

// HTML: <div id="one" lang="en-US">one</div>
//       <div id="two">two</div>
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNode("lang");

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

console.log(d2.getAttribute("lang")); // "en-US"

en-US

const el = document.getElementById("box");
const attr = document.createAttribute("data-role");
attr.value = "admin";

el.setAttributeNode(attr);

console.log(el.getAttribute("data-role")); // "admin"
console.log(attr.ownerElement.id);         // "box"

admin
box

const el = document.getElementById("item");
// <div id="item" title="old">

const next = document.createAttribute("title");
next.value = "new";

const replaced = el.setAttributeNode(next);

console.log(replaced.value);           // "old"
console.log(el.getAttribute("title")); // "new"

old
new

const source = document.getElementById("source");
const target = document.getElementById("target");
const titleAttr = source.getAttributeNode("title");

target.setAttributeNode(titleAttr.cloneNode(true));

console.log(target.getAttribute("title"));
// "Save document"

Save document

const el = document.getElementById("btn");

// Everyday write — preferred for simple cases (MDN)
el.setAttribute("aria-label", "Close");

// Equivalent Attr workflow (more steps)
const attr = document.createAttribute("aria-label");
attr.value = "Close";
el.setAttributeNode(attr);

console.log(el.getAttribute("aria-label")); // "Close"

Close

🚀 Common Use Cases

• Cloning attributes such as lang or title between elements (MDN).
• Building Attr nodes with document.createAttribute() before attaching them.
• Capturing the previous Attr when replacing an attribute of the same name.
• Working with attribute nodes returned by getAttributeNode().
• Teaching the difference between string APIs and Attr-node APIs.
• Pairing with removeAttributeNode() for full Attr lifecycle control.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Prefer setAttribute() when you do not need Attr-node workflows (MDN).
• Clone Attr nodes before attaching them to another element.
• Same-name attributes are replaced; the old Attr is returned (MDN).
• For namespaced Attr nodes, use setAttributeNodeNS() (MDN).
• Related: getAttributeNode(), setAttribute(), removeAttributeNode(), JavaScript hub.

💡 Best Practices