Применяются ли стили CSS к разметке, которая добавляется после загрузки страницы?

Question

Я изучаю Javascript и CSS и столкнулся с проблемой, когда мои стили CSS не применяются к разметке, которую я динамически генерирую из XML и записываю в документ после загрузки страницы. Я могу только предположить, что стили не применяются, потому что я изменяю документ после того, как он уже был загружен. Это правильно? Если это не так, есть ли у вас какие-либо идеи относительно того, почему стили не применяются?

Этот код JavaScript ...

$(function()
{
   //Dynamically generate markup
   strMarkup = GenerateMarkupFromXML();

   //Display the dynamically generated markup   
   document.write(strMarkup);
});

динамически генерирует эту простую разметку ...

<div id="accordion"><h3>Title1</h3><h3>Title2</h3></div>

но эти стили, кажется, никогда не применяются, и теги <h3> просто отображаются со стилем браузера по умолчанию ...

h3
{
  background-color:#ccc;
  color:#003300;
  font-size:1.1em;   
}

Следует также отметить, что когда я вставляю динамически сгенерированную разметку непосредственно в тело, стили применяются правильно.

Заранее спасибо за вашу помощь!

Answer 1

Да ... стили будут применяться к любой динамически добавляемой разметке.

Здесь часть кода document.write () может вызывать проблемы. Как правило, вы должны использовать только document.write (), когда документ загружается и анализируется. Если вы вызываете его в DomReady, как вы, кажется, делаете, это перезапишет всю вашу страницу, что, я думаю, является причиной проблемы. Я еще не проверял.

Я не очень знаком с jQuery, но вместо строки document.write () попробуйте сделать что-то вроде (не проверено):

$ ('body'). Append ('

Title1 / h3> Title2

');

Answer 2

Да, CSS применяется автоматически. Ваш пример не работает, потому что document.write это зло) Я переписываю весь документ с вашими пользовательскими стилями. Если вы хотите использовать document.write, позвоните в соответствующий раздел документа, а не в заголовок. Пример:

document.write ('

Title1

Title2

');

Answer 3

Да, стили CSS применяются к разметке, которая добавляется после загрузки страницы.

Возможно, вы на самом деле не генерируете тот же код, которым себя представляете. Попробуйте выбрать сгенерированный код и выполнить «View Selection Source» в Firefox. Это показывает сгенерированный источник (т. Е. Не только статический контент, который был передан при загрузке страницы).

Редактировать

Я думаю, что есть проблема с использованием document.write () в функции готовности документа ... кажется, вызывает какой-то бесконечный цикл (для меня в Firefox браузер продолжает крутить значок загрузки на вкладке, даже хотя файл находится на моей локальной машине). Решение $('body').append(strMarkup); , опубликованное Энди , работает, как и $('body').html(strMarkup);;