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'之外别无其他功能。但在我的Web应用程序中它不起作用。对我来说很奇怪，因为我一直在这样做，突然间我遇到了一个不起作用的情况。

动态替换内容后，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方法创建所需的节点。

Answer 2

Ctrl + F5应该对其进行排序

浏览器不刷新CSS格式

2 个答案: