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();