How to add boolean attribute using JavaScript

Question

How do you add boolean attributes using JavaScript? For example, how can you change:

<p> to <p contenteditable>

<p> to <p data-example>

Answer 1

In general, you can use element.setAttribute('attributeName', 'value') or element.propertyName = value to toggle an element’s attributes or properties.

Boolean attributes

For boolean attributes, set the attribute with the same-named value:

element.setAttribute('disabled', 'disabled');

Removing a boolean attribute works the same way as other attributes:

element.removeAttribute('disabled');

However, neither of your two examples are boolean attributes!

contenteditable

contenteditable is not a boolean attribute, it’s an enumerated attribute. Its possible values are the empty string, "true", and "false".

While setAttribute seems overkill in this case, you could use it:

element.setAttribute('contenteditable', 'true');
// to undo:
element.removeAttribute('contenteditable');

The property name for the contenteditable attribute is contentEditable (note the capital E), and it recognizes the values 'true', 'false', and 'inherit' — so you could just use:

element.contentEditable = 'true';
// to undo:
element.contentEditable = 'false';

Note that 'true' and 'false' are strings here, not booleans.

data-example

For the data-example attribute, you could use:

element.setAttribute('data-example', 'some value'); // the value should be a string
// to undo:
element.removeAttribute('data-example');

Or, in browsers who support dataset (see the ones highlighted in light green on http://caniuse.com/dataset), you could use:

element.dataset.example = 'some value';

Answer 2

To add a Boolean attribute:

node.setAttribute(attributeName, '');
// example:
document.body.setAttribute('hidden', '');

Note the empty string as the second argument!

Use node.removeAttribute(attributeName) to remove an attribute as mentioned by others.

Answer 3

To set an attribute

Use element.setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute

If you add an id like this:

<p id="p1">

you can select the element like this:

var p1 = document.getElementById("p1"); 

To set a Boolean attribute

According to the W3C HTML4 specification:

Boolean attributes may legally take a single value: the name of the attribute itself

so you can add your attribute like this:

p1.setAttribute("contenteditable", "contenteditable");

To set contentEditable

According to the W3C HTML5 specification, the attribute contentEditable can have values true, false and inherit. Then you would have to do something like this:

p1.setAttribute("contenteditable", "true");

To be honest, I am also not sure which one is best in your situation.

Answer 4

Use element.dataset.example to modify the value of the data-example attribute.

Answer 5

element.setAttribute('contenteditable','contenteditable')

or to clear:

element.removeAttribute('contenteditable')

Answer 6

Boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard).

source: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute