JavaScript Document createAttribute() Method

What You’ll Learn

document.createAttribute() is an instance method that creates a new Attr node (see MDN Document: createAttribute()). Learn how to set attr.value, attach it with setAttributeNode(), the lowercase localName rule, how it compares to setAttribute(), and five try-it labs.

Introduction

Most beginners set attributes with a one-liner: element.setAttribute("class", "active"). That is usually the best choice.

Sometimes you need an actual attribute node — an Attr object you can inspect, pass around, or attach with setAttributeNode(). That is when you call document.createAttribute(localName).

MDN notes the DOM does not enforce which attributes belong on which elements when you create them this way — you are responsible for valid HTML.

Related tutorials: setAttribute(), getAttribute(), attributes.

Understanding document.createAttribute()

An instance method on the page’s document object. Part of the DOM Core API (MDN).

• Parameter — localName: attribute name string (MDN).
• Return value — an Attr node (MDN).
• Name casing — localName is converted to lowercase (MDN).
• Value — assign attr.value before attaching.
• Attach — element.setAttributeNode(attr) adds it to an element.
• Validation — invalid names throw; DOM does not validate element pairing (MDN).

📝 Syntax

General form of Document.createAttribute (MDN):

createAttribute(localName)

Parameters

• localName — string for the attribute name; initializes localName on the new Attr (MDN).

Return value

An Attr node (MDN).

MDN basic example

const node = document.getElementById("div1");
const a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my_attrib")); // "newVal"

Everyday alternative

// Simpler for most apps:
node.setAttribute("my_attrib", "newVal");

⚖️ createAttribute vs related APIs

Examples Gallery

Examples follow MDN Document: createAttribute() and show practical Attr-node patterns.

const node = document.getElementById("div1");
const a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

console.log(node.getAttribute("my_attrib")); // "newVal"

newVal

const attr = document.createAttribute("My_Custom_Attr");

console.log(attr.name);       // "my_custom_attr"
console.log(attr.localName);  // "my_custom_attr"

my_custom_attr
my_custom_attr

const li = document.createElement("li");
li.textContent = "Task";

const dataStatus = document.createAttribute("data-status");
dataStatus.value = "done";
li.setAttributeNode(dataStatus);

console.log(li.dataset.status); // "done"

done

const el = document.createElement("div");

// Attr node path
const attr = document.createAttribute("title");
attr.value = "Tooltip";
el.setAttributeNode(attr);

// Equivalent one-liner:
// el.setAttribute("title", "Tooltip");

console.log(el.getAttribute("title")); // "Tooltip"
console.log(el.getAttributeNode("title") instanceof Attr); // true

Tooltip
true

const button = document.createElement("button");
button.textContent = "Save";

const disabledAttr = document.createAttribute("disabled");
disabledAttr.value = "";
button.setAttributeNode(disabledAttr);

console.log({
  name: disabledAttr.name,
  value: disabledAttr.value,
  ownerTag: disabledAttr.ownerElement?.tagName,
  specified: disabledAttr.specified
});

{ name: "disabled", value: "", ownerTag: "BUTTON", specified: true }

🚀 Common Use Cases

• Attribute node APIs — when code expects an Attr object, not just strings.
• setAttributeNode workflows — move or replace attribute nodes between elements.
• DOM teaching — show that attributes are nodes, not only strings.
• Legacy DOM scripts — maintain code that creates attributes before attaching.
• Not for everyday UI — prefer setAttribute() for simple updates.
• Namespaced markup — use createAttributeNS() for SVG/XML namespaces.

📝 Notes

• MDN: Baseline Widely available since July 2015.
• localName is lowercased (MDN).
• Invalid names throw — no whitespace, NULL, /, =, or > (MDN).
• DOM does not validate which attributes belong on which elements (MDN).
• For namespaced attributes, use createAttributeNS().
• Related: setAttribute(), setAttributeNode(), attributes.

💡 Best Practices