Revision 1125445 of Element.setAttribute()

<p>{{APIRef("DOM")}}</p>

<p>Adds a new attribute or changes the value of an existing attribute on the specified element. Returns undefined.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox">
<em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
</pre>

<ul>
 <li><code>name</code> is the name of the attribute as a string.</li>
 <li><code>value</code> is the desired new value of the attribute.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>

<p>In the following example, <code>setAttribute()</code> is used to set the {{htmlattrxref("disabled")}} attribute on a {{htmlelement("button")}}, rendering it disabled.</p>

<pre class="brush: html">
&lt;button&gt;Hello World&lt;/button&gt;</pre>

<pre class="brush:js">
var b = document.querySelector("button"); 

b.setAttribute("disabled", "disabled");
</pre>

<p>{{ EmbedLiveSample('Example', '300', '50', '', 'Web/API/Element/setAttribute') }}</p>

<h2 id="Notes" name="Notes">Notes</h2>

<p>When called on an HTML element in an HTML document, <code>setAttribute</code> lower-cases its attribute name argument.</p>

<p>If the specified attribute already exists, then the value of that attribute is changed to the value passed to this function. If it does not exist, then the attribute is created.</p>

<p>Even though <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> returns <code>null</code> for missing attributes, you need to use <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> instead of <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> to remove the attribute. The latter will coerce the <code>null</code> value to the string <code>"null"</code>, which is likely not what you want.</p>

<p>Using <code>setAttribute()</code> to modify certain attributes, most notably <code>value</code> in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use <code><em>elt</em>.value</code> instead of <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p>

<p>To set an attribute that takes no value, such as the <code>autoplay</code> attribute of an {{HTMLElement("audio")}} element, use a null or empty value. For example: <code><em>elt</em>.setAttribute('autoplay', '')</code></p>

<div>{{DOMAttributeMethods}}</div>

<h2 id="Specification" name="Specification">Specification</h2>

<ul>
 <li><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
 <li><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="https://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
</ul>