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

【问题标题】：Are CSS styles applied to markup that is added after the page loads?CSS 样式是否应用于页面加载后添加的标记？
【发布时间】：2009-09-22 21:22:54
【问题描述】：

我正在学习 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;   
}

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

提前感谢您的帮助！

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

我对 jQuery 不是很熟悉，但是不要使用 document.write() 行，而是尝试按照（未经测试的）行做一些事情：

$('body').append('

Title1/h3>

Title2

');

【讨论】：

【解决方案2】：

是的，css 会自动应用。您的示例不起作用，因为 document.write 是邪恶的）我建议，它会用您的自定义样式重写整个文档。如果你想使用 document.write 在文档的适当部分调用它，而不是在头部。例子：

h3 { 背景颜色：#ccc；颜色：#003300; 字体大小：1.1em； } document.write('

Title1

Title2

'); 脚本> 正文>

【讨论】：

【解决方案3】：

是的，CSS 样式应用于页面加载后添加的标记。

这可能是因为您实际上生成的代码与您认为的不同。尝试选择生成的代码并在 Firefox 中执行“查看选择源”。这会向您显示生成的源代码（即不仅仅是加载页面时提供的静态内容）。

编辑

我认为在文档准备功能中使用 document.write() 存在问题.. 似乎导致某种无限循环（对于我在 Firefox 中，浏览器一直在选项卡上旋转加载图标，甚至虽然文件在我的本地机器上）。 $('body').append(strMarkup); solution posted by Andy 有效，$('body').html(strMarkup); 也有效；

【讨论】：