CODEWITHSUNDEEP
javascripthtmlcss
BeachRunnerFred
BeachRunnerFred

Reputation: 18578

Are CSS styles applied to markup that is added after the page loads?

I'm learning Javascript and CSS and have run into an issue where my CSS styles aren't being applied to markup that I'm dynamically generated from XML and writing to document after the page has loaded. I can only assume that the styles aren't being applied because I'm modifying the document after it's already been loaded. Is this correct? If this isn't the case, do you have any ideas as to why the styles aren't being applied?

This javascript code...

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

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

dynamically generates this simple markup...

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

but these styles don't ever seem to be applied and the <h3> tags just get displayed with the default browser style...

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

I should also note that when I paste the dynamically generated markup directly into the body, the styles are applied correctly.

Thanks in advance for all your help!

Upvotes: 1

Views: 1181

Answers (3)

Kip
Kip

Reputation: 109433

Yes, CSS styles are applied to markup that is added after the page loads.

It could be that you aren't actually generating the same code that you think you are. Try selecting the generated code and doing "View Selection Source" in Firefox. This shows you the generated source (i.e. not just the static content that was served when the page was loaded).

Edit

I think there is a problem with using document.write() in the document ready function.. seems to be causing some kind of infinite loop (for me in Firefox, the browser keeps spinning the loading icon on the tab, even though the file is on my local machine). The $('body').append(strMarkup); solution posted by Andy works, though, as does $('body').html(strMarkup);;

Upvotes: 1

Anatoliy
Anatoliy

Reputation: 30103

Yes, css applied automatically. Your example don't work because document.write is evil ) It rewrites whole document with your custom styles, I suggest. If you want to use document.write call it in appropriate section of document, not in head. Example:

<head> <style> h3 { background-color:#ccc; color:#003300; font-size:1.1em; } </style> </head> <body> <script> document.write('<div id="accordion"><h3>Title1</h3><h3>Title2</h3></div>'); </script> </body>

Upvotes: 2

Andy Hume
Andy Hume

Reputation: 41664

Yes... the styles will be applied to any dynamically added markup.

The document.write() portion of your code may be causing problems here. In general, you should only use document.write() inline as the document is loaded and parsed. If you call it on DomReady as you seem to be doing it will overwrite your entire page, which I guess is what's causing the problem. I haven't tested though.

I'm not that familiar with jQuery, but instead of the document.write() line try doing something along the lines of (untested):

$('body').append('<div id="accordion"><h3>Title1/h3><h3>Title2</h3></div>');

Upvotes: 2

Related Questions