title: Where is my input current value stored?
body: <p>Let's consider this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="my-input" value="foo"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I change the text inside the input box, I know I can retrieve it via:</p>
  
  <ul>
  <li><code>$('#my-input').val()</code></li>
  <li><code>document.getElementById('my-input').value</code></li>
  </ul>
  
  <p>But if I <kbd>Right click</kbd> > <kbd>Inspect</kbd> I will see something like:</p>
  
  <p><a href="https://i.imgur.com/BHLo1Ro.png" rel="noreferrer"><img src="https://i.imgur.com/BHLo1Ro.png" alt="enter image description here"></a></p>
  
  <p>Is there any way to <strong>see</strong> the value <code>foobar</code> inside the DOM? If not, where is this value stored?</p>
  
  <p>This question is browser agnostic, the background that lead be here is a weird bug in <code>IE 11.0.14</code></p>