When dynamically adding nodes to DOM how to make browser repaint the background to avoid artefacts?
- by Tim
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:
