parentNode being lost on Javascript inner closure? Chrome bug?

When I execute the below test HTML page in Chrome, I see the following in the debug console:

Has parent? true
Has parent? false

Am I right in assuming that this a Chrome bug (it doesn't happen in other browsers), or is Chrome within its right to do this for some reason? It resulted in a bug in one of my web apps and I finally isolated this snippet to repro the core issue.

Here is the test page:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body class="">
      
      
      <script>
        function testDoodle() {
          var testParentEl = document.createElement('div');
          var testChildEl  = testParentEl.appendChild(document.createElement('div'));
          
          document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>');
          console.log('Has parent? ' + !!testChildEl.parentNode);
          
          setTimeout(function() {
              document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>');
              console.log('Has parent? ' + !!testChildEl.parentNode);
          },
          2000);
          return;
        }
        testDoodle();
      </script>

  </body>
</html>

EDIT: I should have mentioned that I'm testing on Windows 7 with Chrome 49.0.2623.87 m (64-bit). Was also able to repro on OSX 10.11.2 with Chrome 49.

Also, I should mention that sometimes it displays true/true and sometimes true/false. You might have to reload the page a few times to witness the issue. I'm not sure, but it's possible that the debug tools (console) need to be open as well.

Thanks much.

parentNode being lost on Javascript inner closure? Chrome bug?

2 Answers