jQuery:将 CSS 应用于创建的节点

Question

我想创建 HTML 节点，然后应用 CSS 样式。使用简单的元素很容易:

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

在我的例子中，我想插入一个更复杂的元素，例如:

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

使用 CSS:

#foo {                                                                       
  ...                                                                        
}                                                                            

#foo .bar {                                                                  
  ...                                                                        
}                                                                            

#foo .baz {                                                                  
  ...                                                                        
}                                                                            

我不想为每个节点单独编写 HTML 代码和样式。我只想将 HTML 和整个 CSS 存储在两个字符串中，并使用这些字符串创建节点。理想情况下，像这样:

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

new_element = $(html_blob).apply_css_from_string(css_blob)

我使用 Crossrider 构建了一个扩展我需要动态创建一个弹出窗口。

Answer 1

怎么样:

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

如果你想稍后删除它:

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