add and remove id by pure JavaScript

Question

How can I remove and add any id by pure JavaScript? Like

document.querySelector('div').classList.add('newClass') ;

and

document.querySelector('div').classList.remove('oldClass') ;

Answer 1

Since ids are single strings it's just a matter of setting and unsetting it:

document.querySelector('div').id = 'whatever';

and to remove, just remove the attribute:

document.querySelector('div').removeAttribute('id');

Answer 2

There are plenty of ways to achieve this, to add new id:

document.querySelector('div').id = 'id_you_like';
document.querySelector('div').setAttribute("id", "id_you_like");

to remove the id attribute:

document.querySelector('div').removeAttribute('id');
document.querySelector('div').setAttribute("id", "");

Although you can set an empty(null) id for elements, it is not a good practice.

According to the W3C:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

If you use jQuery:

$('div').attr('id', 'id_you_like');
$('div').removeAttr('id');

Answer 3

Something like this,

document.getElementById("before").id = "newid";
console.log(document.getElementById("newid").id)
//or
document.querySelector('div').id="newid"

<div id="first">
</div>