Display HTML+CSS (as result) with Javascript


I have an HTML code block with some CSS styling which has multiple sub-elements and I want to display it in another div (in an iframe) using Javascript. What I have now can display only the HTML but not the styling. I use the following to display the HTML:


I know how to update CSS in real time for single elements using something like:

$('#iframe').contents().find('#div-in-display').css('color', 'black');

I can’t use the above one-to-one CSS styling because my HTML code that will be displayed is dynamic.

Thanks for any ideas.

Can you create and update a <style> section in the head section of the iframed content?