Why does chrome consoles jquery added value to select options even before I assign a value

Question

I have a select input where I am adding another option via jQuery, The steps I am following here is creating an option element by documents createElement method, then adding some innerHTML and at last, setting the value.

The problem is at the second step, when I just created an element and added the innerHTML only ( didn't add the value yet ), chrome consoles the element with the value which I have added in the next step.

How does chrome do this ? and why ?

Check the code snippet below:

Note: The snippet here shows it corretly, but chrome browser doesn't when I am running the code from an individual .html file. Firefox shows the correct output though.

$(document).ready(function() {
  $('#addSteve').on('click', function() {
    var newVal = document.createElement('option');
    newVal.text = 'Steve';
    console.log(newVal); // didn't assign a value 'hello', still consoles it;
    newVal.value = 'Hello';
    console.log(newVal); // supposed to console the value here only;

    $('#wrapper').find('select').append(newVal);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <select>
    <option value="John" selected>John</option>
    <option value="Nick">Nick</option>
    <option value="Gomez">Gomez</option>
  </select>
</div>

<button type="button" id="addSteve">Add Steve</button>

Please check the `Note` at the end of my question, the snippet works here, but not on an individual `.html` file — Towkir, Nov 13 '18 at 05:29
then its impossible to answer this question because the demo is not showing what the problem is — guradio, Nov 13 '18 at 05:30
[`option`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) doesn't have HTML, it can contain plain text and escaped HTML characters only. Though some browsers shows a set innerHTML as option text, you can't rely all browsers rendering invalid markup correctly. — Teemu, Nov 13 '18 at 05:30
@guradio there are a lot of questions that can't be demonstrate here because the snippet runs in an `iframe` ( I guess ), but in an individual `.html` file, it clearly does. if you want, I can share a link to some `gist`. Do you want me to ? Thanks — Towkir, Nov 13 '18 at 05:33
Do you see a small blue i-icon in Chrome console?. If you see it, please hover over the icon, and read the explanation. — Teemu, Nov 13 '18 at 05:34
@Teemu no, I don't see any icon like that, I updated my local `.html` file with `newVal.text` property, still seeing the same result — Towkir, Nov 13 '18 at 05:36
@Teemu that does explain the reason in a bit, but is there any way to get the synchronous result / the expected one ? — Towkir, Nov 13 '18 at 05:40
In zzzzBov's answer that is mentioned: "_log the individual values_". — Teemu, Nov 13 '18 at 05:44
Another explanation [here](https://stackoverflow.com/a/23392650/2159528) — Louys Patrice Bessette, Nov 13 '18 at 06:06

score 1 · Answer 1 · edited Nov 13 '18 at 06:08

It takes approximately 8ms (at least on my computer, yours might be faster/slower) for the trace to output in Chrome, and so reflects the variable's value after those milliseconds. See:

$(document).ready(function() {
  $('#addSteve').on('click', function() {
    var newVal = document.createElement('option');
    newVal.text = 'Steve';
    console.log(newVal); 
    setTimeout(function(){
      newVal.value = 'Hello';
      console.log(newVal); 
    }, 8); // replace with a lower number see the value traced in the earlier console log.

    $('#wrapper').find('select').append(newVal);
  });
});

Why does chrome consoles jquery added value to select options even before I assign a value

1 Answers1