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

Posted by Tim on Stack Overflow See other posts from Stack Overflow or by Tim
Published on 2010-03-26T12:19:21Z Indexed on 2010/03/26 12:23 UTC
Read the original article Hit count: 348

Filed under:
|
|

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. alt text

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:

© Stack Overflow or respective owner

Related posts about dom

Related posts about background-color