Браузер не обновляет форматирование CSS

Question

Я использую java-скрипт для динамического создания элемента и наполнения его контентом. после того, как я добавил его как дочерний элемент к существующему элементу текущего дерева dom, браузер игнорирует мой определенный CSS. Используя Firefox, я установил панель инструментов веб-разработчика и заметил, что когда я выключаю таблицы стилей 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 для создания нужных вам узлов.

Answer 2

Ctrl + F5 должен отсортировать