title: Element changes in DOM in Chrome but doesn't appear on page
body: <p>I am attempting to add an ajax loading message into Single Page application.  The code works by updating a DOM element when the first http request goes out, and adds an sequence number to an array, which gets added as an http header.  The application then monitors the header of requests coming back, removing items from the array, and when the array is empty, the loading message is changed.  The code below shows how the code is added and then removed from the array (it's an angular2 app, but this is done in plain javascript/typescript).  The code behaves perfectly in Firefox, however in Chrome, amazingly, even though the DOM updates (I can see the code change and the text of the element change to 'Loading' in devtools web inspector) <strong>the change never appears on the page</strong>  --   it stays as 'Not Loading anymore'. I'm wondering if this is possibly a bug in Chrome.</p>
  
  <p>Below is the code for adding the DOM item.  This gets called immediately before a request is sent out to our API</p>
  
  <pre><code> private setSequenceId:number(){
          //if the array of requests is not created, add now
          if (window["lsRequestIds"]===undefined )
          {
              window["lsRequestIds"]=[];
          }
          //if there are no current requests, update this element to show loading text
          if( window["lsRequestIds"].length===0)
          {
              document.querySelector("#top-container").innerHTML="&lt;h1&gt;loading&lt;/h1&gt;";
  
          }
  
          //generate the new number by incrementing, this will be added to the array, and sent as a request header to track the requests
           let currentId = this.requestSequence++;
          window["lsRequestIds"].push(currentId);
          return currentId;
      }
  </code></pre>
  
  <p>The code below listens for the incoming requests, inspecting the header of each one, and then removing the sequence number from the request. If there are no items left in the array, all the items have returned and the loading symbol is removed.</p>
  
  <pre><code>(function (open) {
  
  
      XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
          this.addEventListener("readystatechange", function () {
             //capture the sequence id from the header
              var sequenceExp = /X-LS-Sequence:\s([0-9]*)/
              var headers = this.getAllResponseHeaders();
              if (headers) {
  
                  var sequenceMatches = headers.match(sequenceExp)
                  if(sequenceMatches &amp;&amp; sequenceMatches.length&gt;1)
                  {
                      //remove the sequence id from the array
                      window.lsRequestIds = window.lsRequestIds.filter(function(seq){return seq.toString() !== sequenceMatches[1]})
                      console.log(window.lsRequestIds);
                      if(window.lsRequestIds.length===0)
                      {
                           let container = document.querySelector("#top-container");
                           if(container!==null)
                           {
                              //when the array is empty, all requests have returned -- remove the item from the DOM
                               container.innerHTML="&lt;h1&gt;Not Loading anymore&lt;/h1&gt;";
                           }
                      }
                  }
  
          }, false);
  
          open.call(this, method, url, async, user, pass);
      };
  
  })(XMLHttpRequest.prototype.open); 
  </code></pre>