JavaScript Element setAttributeNode() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word SETATTRIBUTENODE

Definition

Element.setAttributeNode() adds a new Attr node to the element (MDN). Prefer setAttribute() for simple name/value writes. Use setAttributeNode() when you already have an Attr (for example after cloning from another element).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.setAttributeNode. Start with this line.

JavaScript
el.setAttributeNode(attr)
CallWhat it does
el.setAttributeNode(attr)Primary signature.
el.setAttributeNode(...)Call with the arguments your case needs.

Built into the browser. Call setAttributeNode(...) on an Element — no import required.

Library declarations
JavaScript
el.setAttributeNode(attr)

Parameters

ParameterDescription
attributeRequired. The Attr node to add
CloneOptional. Attr cannot sit on two elements at once
NamespacesOptional. Use setAttributeNodeNS() for NS Attrs

Return Value

Return ValueDescription
*Replaced Attr, or null if none

JavaScript Examples

Example 1 — Clone an Attribute

MDN: copy lang from one element to another via Attr + clone.

JavaScript
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"
Try It Yourself

How It Works

  1. Get the node. getAttributeNode("lang") returns Attr.
  2. Clone. Keeps the original on d1.
  3. Attach. setAttributeNode adds the copy to d2.
  4. Confirm. getAttribute("lang") reads the string value.

Example 2 — Create Then Attach

Build a new Attr with document.createAttribute(), then set it.

JavaScript
const el = document.getElementById("box");
const attr = document.createAttribute("title");
attr.value = "Hello";

el.setAttributeNode(attr);
console.log(el.getAttribute("title")); // "Hello"
Try It Yourself

How It Works

  1. createAttribute. Makes an orphan Attr.
  2. Set value. Assign attr.value before attaching.
  3. Attach. setAttributeNode links it to the element.
  4. Simpler path. setAttribute("title", "Hello") does the same job.

Example 3 — Capture the Replaced Attr

MDN: if the name already exists, the old Attr is returned.

JavaScript
const el = document.getElementById("box");
el.setAttribute("title", "old");

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

const old = el.setAttributeNode(next);
console.log(old && old.value);           // "old"
console.log(el.getAttribute("title")); // "new"
Try It Yourself

How It Works

  1. Existing title. Element already has that name.
  2. New Attr. Same name, different value.
  3. Return. Old Attr comes back from setAttributeNode.
  4. Element. Now holds the new Attr’s value.
Compatibility

Browser Support

Element.setAttributeNode() is Baseline Widely available (MDN, since July 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.setAttributeNode()

Add an Attr node to an element. Prefer setAttribute() unless you need the Attr object (clone, inspect, replace).

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
setAttributeNode() Baseline

Bottom line: Fully supported. Reach for it when cloning Attr nodes; otherwise setAttribute() is clearer.

Frequently Asked Questions

It adds an Attr node to the element. If an attribute with the same name already exists, that attribute is replaced and the old Attr is returned (MDN).
No. MDN marks Element.setAttributeNode() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
The replaced Attr node if one existed with the same name; otherwise null when nothing was replaced (MDN: the replaced attribute node, if any).
MDN: use setAttributeNode() when you need to work with the Attr node first (for example cloning from another element). Prefer setAttribute() for simple name/value writes.
An Attr belongs to at most one element. Clone it with attr.cloneNode(true) before calling setAttributeNode on the target (MDN example).
Use document.createAttribute(name), set attr.value, then element.setAttributeNode(attr).

Next: Element setAttributeNodeNS()

Attach a namespaced Attr node to an element.

setAttributeNodeNS() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element setAttribute() Method JavaScript Element setAttributeNodeNS() Method