When dynamically adding nodes to DOM how to make browser repaint the background to avoid artefacts?

Question

Given nested DIVs:

    <div id="outer">
      <div id = "inner" >
        <div id = "injectedcontent">
           nodes are added to this DIV with
        </div>
      </div>
    </div>

and this css:

    #outer {background-color: lightgrey; padding: 2em; width: 100%; height: 100%}
    #inner {background-color: white; width: 100%; height: 100%}

and content injected in this manner:

  function injectContent(titleDivId, content){

    var resultscontainer=document.getElementById('injectedcontent');
    var titleDiv = document.getElementById(titleDivId);
    if (titleDiv == null) {
    titleDiv=document.createElement('div');
    titleDiv.id=titleDivId;
    titleDiv.innerHTML += content;
    resultscontainer.appendChild(titleDiv);
    } else {
         titleDiv.innerHTML += content;
    }

  }

the browsers do not redraw the outer DIV's background to accommodate the injected content. When I scroll the page (lots of text gets injected into the page -- it is a full-text search app) the lightgray background is painted right across the text, as shown in the attached image.

Is there a way to cause the browser to recalculate page-depth after injecting content? Or is this problem related to this line:

               titleDiv.innerHTML += content;

Is it better to add titleDiv's content a node at a time? I've recently seen respected people using innerHTML in this way, although postings from from several years ago discourage use of innerHTML.

1: