JavaScript Document createAttribute() Method

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

Definition

document.createAttribute() creates a new attribute node (Attr). The name string is converted to lowercase. Creating the node does not attach it — set value, then use setAttributeNode() (MDN).

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

Syntax

Call document.createAttribute. Start with this line.

JavaScript
document.createAttribute(localName)
CallWhat it does
document.createAttribute(localName)Primary signature.
document.createAttribute(...)Call with the arguments your case needs.

Built into the browser. Call createAttribute(...) on document — no import required.

Library declarations
JavaScript
document.createAttribute(localName)

Parameters

ParameterDescription
localNameRequired. Attribute name (lowercased)
Attach stepRequired. setAttributeNode puts it on the element

Return Value

Return ValueDescription
*Attr node

JavaScript Examples

Example 1 — Create, Set Value, Attach

MDN pattern: build an Attr, then put it on an element.

JavaScript
const node = document.createElement("div");
const a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

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

How It Works

  1. Create a host. Any element can receive the attribute.
  2. Create the Attr. createAttribute("my_attrib") returns a node.
  3. Set the value. Assign a.value before or after attach.
  4. Attach. setAttributeNode(a) puts it on the element.

Example 2 — Name Is Lowercased

Mixed-case input becomes lowercase localName (MDN).

JavaScript
const a = document.createAttribute("MyAttr");

console.log(a.name);      // "myattr"
console.log(a.localName); // "myattr"
Try It Yourself

How It Works

  1. Pass mixed case. The argument is "MyAttr".
  2. Engine lowercases. The stored name becomes "myattr".
  3. Read name / localName. Both reflect the lowercased form.
  4. Plan for HTML. Attribute names in HTML are case-insensitive in practice.

Example 3 — Invalid Name Throws

Names with = (or whitespace, /, >, empty) raise InvalidCharacterError.

JavaScript
try {
  document.createAttribute("bad=name");
  console.log("ok");
} catch (err) {
  console.log(err.name); // "InvalidCharacterError"
}
Try It Yourself

How It Works

  1. Pass a bad name. "bad=name" contains =.
  2. Call throws. The engine rejects the name (MDN).
  3. Catch err.name. Expect "InvalidCharacterError".
  4. Validate first. Avoid whitespace, /, =, >, and empty strings.
Compatibility

Browser Support

Document.createAttribute() is Baseline Widely available (MDN). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

Document.createAttribute()

Supported in every modern browser. Prefer setAttribute for everyday attribute setting.

99% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
document.createAttribute() Excellent

Bottom line: Safe everywhere. Focus on when you need an Attr node versus setAttribute rather than feature detection.

Frequently Asked Questions

MDN: Document.createAttribute() creates a new attribute node — an Attr object. You typically set attr.value, then attach it with element.setAttributeNode(attr).
No. MDN marks Document.createAttribute() as Baseline Widely available. It is not Deprecated, Experimental, or Non-standard.
An Attr node. The localName parameter initializes the attribute name; assign attr.value before attaching it if you need a value.
For everyday code, element.setAttribute(name, value) is simpler. Use createAttribute() when you need an Attr node — for example before setAttributeNode().
Yes (MDN). The string is converted to lowercase when the Attr node is created.
MDN: it must have at least one character and may not contain ASCII whitespace, NULL, /, =, or >. An invalid name throws InvalidCharacterError.

Next: createAttributeNS()

Learn how to create namespaced attribute nodes for SVG and XML.

createAttributeNS() tutorial →

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 Document close() Method JavaScript Document createAttributeNS() Method