Comment attribute ID on element

Yes possible to comment, but html does not know <input /*id="blabla"*/> and just change element id to _id . Sending the code below, pretty simple code for two jquery or pure javascript form to understand better.

/* jQuery */
var elemento1 = $('[id="meuid1"]');
var nome1 = elemento1.attr('id');
elemento1.removeAttr('id').attr('_id', nome1);

/* Javascript Puro */
var elemento2 = document.querySelector('[id="meuid2"]');
var nome2 = elemento2.getAttribute('id');
elemento2.removeAttribute('id');
elemento2.setAttribute('_id', nome2);

/* Resultado de Console */
console.log($('.minhaclasse')[0]);
console.log($('.minhaclasse')[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>jQuery<br><inputtype="text" id="meuid1" class="minhaclasse">
<br><br>
Javascript Puro<br>
<input type="text" id="meuid2" class="minhaclasse">

Following is an implementation with some controls to ensure the integrity of the properties.

var AttrManager = function (element) {
  this.attr = {};
  this.element = element;
}

AttrManager.prototype.toggle = function (name) {
  if (name in this.attr) {
    this.element.setAttribute(name, this.attr[name]);
    delete this.attr[name];
  } else {
    this.attr[name] = this.element.getAttribute(name);
    this.element.removeAttribute(name);
  }
}

var teste = document.getElementById("teste");
var attrManager = new AttrManager(teste);

console.log(teste);
attrManager.toggle("id");
console.log(teste);
attrManager.toggle("data-teste");
console.log(teste);
attrManager.toggle("data-teste");
console.log(teste);
attrManager.toggle("id");
console.log(teste);

<div id="teste" class="teste" data-teste>
</div>

Possible is not in all browsers, as they remove comments from tags. Commenting on the attribute is dangerous since it is necessary to modify the outerHTML of its element, which ends up re-creating / removing its elements (if they have a reference in JavaScript, they will only be dead, but can be declared on the page again with% etc.).

To better understand, try this snippet:

// Observação: em navegadores modernos, elementos com id
// são disponíveis em 'window' se tiverem caracteres válidos.

var minhaDiv = div;

document.body.innerHTML = '<div id="div">hey</div>';

// "old"
alert("Velha div: " + minhaDiv.innerHTML);

// "hey" - essa não é mais a 'minhaDiv'
alert("Nova div: " + div.innerHTML);

<div id="div">old</div>

Note: To comment in HTML is used

Modifying the "id" of an element will only complicate your code.

Continuing, you'd better add / remove the attribute "id" with the value always stored, for example:

// Você pode usar diretamente 'removeAttr' e
// 'attr' (com o id específico) para remover/adicionar o atributo id
// (portanto, é necessário
// jQuery.fn.each para percorrer cada elemento em uma função
// de toggle)

jQuery.fn.toggleAttr = function(attrName, value) {

    this.each(function() {

        // this é um elemento puro do JavaScript aqui, então:
        // $(this) --> lista de elementos do jQuery
        var $me = $(this);

        // verifica se o atributo não existe (ou se é inativo)
        if ($me.attr(attrName) === undefined || $me.attr(attrName) === false) {
            $me.attr(attrName, value);

        } else $me.removeAttr(attrName);
    });
};

var $input = $("#meuid");

// memoriza o id
var id = $input.attr('id');

// remove o atributo id
$input.toggleAttr("id", id);

// adiciona o atributo id
$input.toggleAttr("id", id);

What I would do in this case is this:

<input type="text" data-id="minhaId">

Data-id would be a generic field with my id just to store it through html and when I needed to activate my id would do:

//PEGO O VALOR DA ID FAKE

   valor_na_fake_id = $("data-id").val();

//COLOCO DE VOLTA NO ELEMENTO COMO ID

    $("data-id").attr('id',valor_na_fake_id);

// O RESULTADO SERIA

    <input type="text" data-id="minhaId" id="minhaId">