javascript css 未应用于使用 jQuery .append() 创建的 html 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11471151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css not being applied to html elements created with jQuery .append()
提问by Julian Coltea
So I know this is probably horrible programming practice, but I'm in a bit of a time crunch, and basically I have a tag within my code, and upon clicking a button on the screen, I'm trying to append a bunch of code inside that div. However, I've noticed two things. One, my other javascript crashes UNLESS the appended code is all on one line, and two, my css style sheets aren't being applied to the code even though I've assigned classes. Here's the relevant code:
所以我知道这可能是可怕的编程实践，但我时间紧迫，基本上我的代码中有一个标签，点击屏幕上的按钮后，我试图附加一堆那个div里面的代码。但是，我注意到两件事。一，我的另一个 javascript 崩溃，除非附加的代码都在一行上，二，即使我已经分配了类，我的 css 样式表也没有应用于代码。这是相关的代码：
$("#results").append("<ul class='sdt_menu'>");
for(i=0; i < progression[max].length;i++)
{
$("#results").append(
"<li><a href='#'><img src='images/youAreHere.jpg' alt=''/><span class='sdt_active'></span><span class='sdt_wrap'><span class='sdt_link'>"+progression[max][i]+"</span><span class='sdt_descr'>hover to view description</span></span></a><div class='sdt_box'>"+jobs[progression[max][i]]['description']+"</div></li>");
}
$("#results").append("</ul>");
Any help demystifying this would be greatly appreciated.
任何揭开这一神秘面纱的帮助将不胜感激。
回答by Jim H.
When you append, you should be appending an entire, complete, closed set of tags. It doesn't work like a stringbuilder. Try instead something like:
附加时，您应该附加完整的、完整的、封闭的标签集。它不像字符串生成器那样工作。尝试改为：
var tag = '<ul class="sdt_menu">';
for(var i = 0; i < progression[max].length; i++) {
tag += '...all of your other list items';
tag += "</ul>";
$(tag).appendTo("#results");
回答by Alnitak
In your current code, as soon as you add the <ul>it gets automatically closed by the browser (since it's impossible to have unclosed tags in the DOM) and then your <li>are being added to #resultstoo. Or at least, they would be, if it were legal to have an <li>be a child of a <div>.
在您当前的代码中，一旦您添加<ul>它，它就会被浏览器自动关闭（因为在 DOM 中不可能有未关闭的标签），然后您<li>也将被添加#results。或者至少，他们会是这样，如果它是合法的，有一个<li>是的一个孩子<div>。
Instead, you need to append your <li>elements to the <ul>, not to #results:
相反，您需要将<li>元素附加到<ul>，而不是#results：
var $ul = $("<ul class='sdt_menu'>");
for (i = 0; i < progression[max].length; i++) {
$ul.append(...);
}
$ul.appendTo('#results');
回答by Hiral Vadodaria
Try this:
试试这个：
var tag = [];
var ic=0;
tag[++ic] = '<ul class="sdt_menu">';
for(var i = 0; i < progression[max].length; i++) {
tag += '...all of your other list items';
}
tag[++ic] = "</ul>";
$("#results").append(tag.join(''));
