Question

I want to create HTML node, and then apply CSS style. With a simple element it is easy:

$('<div>').css("color","red")

In my case I want to insert a more complicated element, like:

<div id="foo">
  <span class="bar"> foo </span>
  <span class="baz"> bar </span>
</div>

with CSS:

#foo {                                                                       
  ...                                                                        
}                                                                            

#foo .bar {                                                                  
  ...                                                                        
}                                                                            

#foo .baz {                                                                  
  ...                                                                        
}                                                                            

I don’t want to HTML code and styles separately for each node. I would like just to store HTML and the whole CSS in two strings, and create the node using those strings. Ideally, something like that:

html_blob = '<div> id="foo"> ... </div>'
css_blob = '#foo {... } ... #foo .baz {...}'

new_element = $(html_blob).apply_css_from_string(css_blob)

I build an extension using Crossrider and I need to create a popup dynamically.

Answer 1

How about:

$(someelement).append(html_blob);
$('head').append('<style id="tempstyle">' + css_blob + '</style>');

If you want to remove it later:

$('#tempstyle').remove();