Set attribute without value

Set attribute without value

How do I set a data attribute without adding a value in jQuery? I want this:

I tried:
$(‘body’).attr(‘data-body’); // this is a getter, not working
$(‘body’).attr(‘data-body’, null); // not adding anything

Everything else seems to add the second arguments as a string. Is it possible to just set an attribute without value?

Solutions/Answers:

Solution 1:

The attr() function is also a setter function. You can just pass it an empty string.

$('body').attr('data-body','');

An empty string will simply create the attribute with no value.

<body data-body>

Reference – http://api.jquery.com/attr/#attr-attributeName-value

attr( attributeName , value )

Solution 2:

Perhaps try:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

Solution 3:

The accepted answer doesn’t create a name-only attribute anymore (as of September 2017).

You should use JQuery prop() method to create name-only attributes.

$(body).prop('data-body', true)

Solution 4:

You can do it without jQuery!

Example:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>

To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (“”), we are setting disabled to true, which results in the button being disabled.

From MDN Element.setAttribute()

Related:  jQuery/JavaScript collision detection