javascript - CSS 样式是否应用于页面加载后添加的标记？

Question

我在学习 Javascript 和 CSS 时遇到了一个问题，即我的 CSS 样式没有应用于我从 XML 动态生成并在页面加载后写入文档的标记。我只能假设没有应用样式，因为我在加载文档后对其进行修改。它是否正确？如果不是这种情况，您是否知道为什么没有应用这些样式？

这段 javascript 代码...

$(function()
{
   //Dynamically generate markup
   strMarkup = GenerateMarkupFromXML();

   //Display the dynamically generated markup   
   document.write(strMarkup);
});

动态生成这个简单的标记...

<div id="accordion"><h3>Title1</h3><h3>Title2</h3></div>

但这些样式似乎从未被应用，而且 <h3>标签只是以默认浏览器样式显示...

h3
{
  background-color:#ccc;
  color:#003300;
  font-size:1.1em;   
}

我还应该注意，当我将动态生成的标记直接粘贴到正文中时，样式会正确应用。

在此先感谢您的帮助!

Answer 1

是的...样式将应用于任何动态添加的标记。

您的代码的 document.write() 部分可能会在此处引起问题。通常，您应该只在加载和解析文档时内联使用 document.write() 。如果你在 DomReady 上调用它，就像你正在做的那样，它会覆盖你的整个页面，我想这就是导致问题的原因。不过我还没有测试过。

我对 jQuery 不太熟悉，但不要使用 document.write() 行，而是尝试按照(未测试)的方式做一些事情:

$('body').append('

Title1/h3>

Title2

');