How do you add boolean attributes using JavaScript? For example, how can you change:
<p> to <p contenteditable>
<p> to <p data-example>
In general, you can use element.setAttribute('attributeName', 'value') or element.propertyName = value to toggle an element’s attributes or properties.
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!
contenteditablecontenteditable 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-exampleFor 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';
