Question

i’m using java script to dynamically create an element and populate it with content. after i appended it as a child to an existing element of the current dom tree, the browser ignores my defined CSS.
Using firefox i installed the web developer toolbar and noticed that when i turn off css style sheets and turn it on again, the element is displayed properly. (pushing Strg + Shift + S twice)
Internet Explorer is doing fine, but FF,Chrome are refusing to do it.

my code:

var elem = document.createElement("pre");
var node = document.createTextNode("<span class=\"green\">i should be green</span>");
elem.appendChild(node);

var el = document.getElementById('div1');
el.innerHTML = "";
el.appendChild(elem);

i tested the code in a simple test page where nothing else than ‘div1’ existed and it worked. but in my web application it doesnt work. strange for me because i’m doing that all the time and suddenly i encountered a case where it doesnt work.

Are there any common problems with css rendering issues after replacing content dynamically?
Is there a way to force a refresh like the firefox developer toolbar is doing?

thanks,

Answer 1

use:

var elem = document.createElement("pre");
var span = document.createElement("span");
span.setAttribute("class","green");
var node = document.createTextNode("i should be green");
span.appendChild(node);
elem.appendChild(span);

var el = document.getElementById('div1');
el.appendChild(elem);

Just use DOM methods to create the nodes you want.