console.log() different than what is shown in inspect element

Question

I am changing the id of a particular input tag:

 <input id="#scan-" type="text"  class="inline-edit-menu-order-input" value="">

through javascript as shown below:

 $('.editinline').on('click',function (e) {
     
       inlineEditPost.revert();
      var post_id = inlineEditPost.getId(this);
     inlineEditPost.edit(post_id);
      console.log(post_id);
      const post_row = document.getElementById("post-"+post_id);
      const scanningM = $( '.column-scanning_method', post_row ).text() ;
      console.log(scanningM);

      //change #scan- to id of selected
      
      document.getElementById("#scan-").id = "#scan-"+post_id;
      console.log(document.getElementById("#scan-"+post_id));
      document.getElementById("#scan-"+post_id).value=scanningM;
      
  });

What I am finding strange is that the line

 console.log(document.getElementById("#scan-"+post_id));

is showing that the id has changed but the inspect element window still shows the input tag with id #scan- only

Furthermore, the change in value in the last line is not being effected, most probably because the elementbyid is not found. Any idea what am I doing wrong pls?

FWIW, an `id` attribute should not contain `#`; that's just CSS syntax to select an id, not part of the id. — deceze, Aug 24 '22 at 09:14
Even if changed thus removing the # the last line is not working — danielE, Aug 24 '22 at 09:19

console.log() different than what is shown in inspect element

0 Answers0