0

我想创建 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构建了一个扩展，我需要动态创建一个弹出窗口。

4

3 回答 3

3

怎么样：

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

如果您想稍后删除它：

$('#tempstyle').remove();
于 2012-11-01T11:09:25.580 回答
1

这是我所理解的答案：

 $("#top_element").append(html_blob);

现在，如果 css 在样式表中出现在其自身之前会更好，或者您可以像下面这样动态附加：

$("head").append("<style>"+css_blog+"</style>")
于 2012-11-01T11:11:07.493 回答
0

为什么您要这样做，或者我没有得到您想要实现的目标。

但是，如果您需要控制呈现重复的 html 控件。看看 jQuery 模板。

jQuery 模板对重复的 html 内容提供了出色的控制。

// Convert the markup string into a named template
// you can declare your string template like this
$.template( "summaryTemplate", "<li>${Name}</li>" );

function renderList() {
    // Render the movies data using the named template: "summaryTemplate"
    $.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}
于 2012-11-01T11:16:09.583 回答