Javascript 动态创建的HTML对象没有应用CSS

最终产品：由word文档中的数据填充的网页，该文档被输入到一个循环的HTML结构中

问题：运行时，会创建HTML元素，但在调整窗口大小之前不会应用CSS类

Javascrip：

    for (i=0; i<=timeline_data.length; i++){
        var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
        var newItem = document.createElement('div');
        newParent.appendChild(newItem);
        newItem.setAttribute('class','wgt-timeline-bdy-item');

        var newText = document.createElement('p');
        newItem.appendChild(newText);
        newText.setAttribute('class','timeline-new-text');
        newText.id="timeline-" + timeline_data[i].id + "-text";

    }

在HTML中没有什么意外，wgt timeline bdy wrap id是一个div

---

提前感谢您的帮助

尝试将附加到DOM作为循环中的最后一件事（即设置类之后）。另外，在大多数地方，我是通过

element.className='xxx'

而不是使用

setAttribute（）

函数来实现的；不过，这并不重要。

在for循环执行完毕后，尝试编写jQuery函数来应用CSS样式。大概是这样的：

for{...}
styleelements();

function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}

---

for

循环在代码中的确切位置是什么？你能发布整个脚本吗？你是把CSS放在主体而不是头部吗？可能不是这样，但我以前见过这种情况。您能制作一个JSFIDLE来演示这个问题吗？CSS应该像处理静态内容一样处理动态内容。事实上，这是CSS的要点之一。许多应用程序通过动态更改其类来更改元素的样式，但循环也是创建新元素的地方。如果它在一个特定的事件处理程序中，元素在该事件发生之前根本不会显示。为什么这种情况下需要jQuery？好吧，您可以使用javascripts.style函数，但我发现jQuery通常更快更容易。事实并非如此；人们只是喜欢使用它b/c，他们不必知道特定于浏览器的内容。必须将所有CSS复制到脚本中是一项繁重的要求。这意味着每次更新CSS文件时，他们都必须对jQuery进行相同的更改。没有必要这样做。@colinmcp：如果用户试图做一些复杂的事情，那么使用处理所有可能的浏览器等的库是可以理解的。但是您并不需要jQuery来添加/删除类。

for{...}
styleelements();

function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}