javascript - 浏览器不刷新 CSS 格式

Question

我正在使用 java 脚本动态创建一个元素并用内容填充它。在我将它作为子元素附加到当前 dom 树的现有元素后，浏览器忽略了我定义的 CSS。我使用 firefox 安装了 Web 开发人员工具栏，并注意到当我关闭 css 样式表并再次打开它时，该元素显示正确。 (按 Strg + Shift + S 两次)Internet Explorer 运行良好，但 FF、Chrome 拒绝运行。

我的代码:

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);

我在一个简单的测试页面中测试了代码，其中除了“div1”之外没有其他任何东西存在并且它有效。但在我的网络应用程序中它不起作用。对我来说很奇怪，因为我一直在这样做，突然间我遇到了一个不起作用的情况。

动态替换内容后有没有常见的css渲染问题？有没有办法像 firefox 开发人员工具栏那样强制刷新？

谢谢，

Answer 1

使用:

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);

只需使用 DOM 方法来创建您想要的节点。