如何将 CSS 样式应用于 AJAX 调用后呈现的内容答案

【问题标题】：How to apply CSS styles to content rendered after AJAX call如何将 CSS 样式应用于 AJAX 调用后呈现的内容
【发布时间】：2017-07-25 05:45:39
【问题描述】：

我正在编写一个应用程序，它通过 AJAX 获取一堆 JSON 数据，然后呈现由 es6 模板文字中的相同数据构造的视图。非常简单的演示版本：

let mountPoint = document.getElementById("mountPoint");
let view = document.createElement("section");
view.id = "view";
view.innerHTML = `<section>${returnedAjaxData}</section>`;
mountPoint.innerHTML = view;

#mountPoint {
  background: #000000;
}

#view {
  background: #444444
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My App</title>
</head>
<body>
  <section id="mountPoint"></section>
</body>
</html>

其中 ${returnedAjaxdata} 是从 Ajax 调用返回的数据（此处未显示，但工作正常）

问题是“#mountPoint”有黑色背景，但“#view”没有灰色背景。似乎 CSS 文件在“#view”渲染之前运行，因为它在渲染之前等待 Ajax 数据。

编辑我知道如何为特定元素更改 AJAX 成功的 CSS。我的问题是如何在 AJAX 调用返回并呈现 DOM 后运行整个样式表。对于上下文 - 整个应用程序将在“#mountPoint”内，因此更新单个元素不会有太大帮助

一种可能的解决方案是在渲染“#view”之后编写 styles.min.css 文件，但这看起来很老套……我想知道：React 和其他视图渲染框架是如何做到这一点的？它们在读取 CSS 文件后渲染 HTML 对吗？有没有我可以学习的好的模式？

【问题讨论】：

jQuery: Changing the CSS on an element loaded with ajax?的可能重复
我不这么认为。该答案引用了如何更改单个元素，我需要在 AJAX 调用返回并呈现 innerHTML 后运行整个样式表

标签： javascript ajax reactjs templates ecmascript-6

【解决方案1】：

Element#innerHTML 解析字符串，并将其设置为节点的 html 内容。您使用Document#createElement 创建的节点不是字符串。当您尝试使用 Element#innerHTML 将其添加到 mountPoint 时，它会转换为字符串，并且该字符串没有 id view。

您需要使用Node#appendChild 或ParentNode#append 将节点附加到视图（MS 浏览器不支持）。

另外css选择器（例如id）区分大小写，css中的mountpoint和html中的mountPoint是不一样的。

let mountPoint = document.getElementById("mountPoint");
let view = document.createElement("section");
view.id = "view";
view.innerHTML = `<section>returnedAjaxData</section>`;
mountPoint.appendChild(view); // append as a child of mountPoint

#mountPoint { /** renamed to mountPoint **/
  height: 40px; /** just for the example **/
  background: #000000;
}

#view {
  background: #444444
}

&lt;section id="mountPoint"&gt;&lt;/section&gt;

如果 CSS 和 HTML 中的 id 完全相同，Element#innerHTML 也可以：

let mountPoint = document.getElementById("mountPoint");
mountPoint.innerHTML = '<section id="view">returnedAjaxData</section>';

#mountPoint { /** renamed to mountPoint **/
  height: 40px; /** just for the example **/
  background: #000000;
}

#view {
  background: #444444
}

&lt;section id="mountPoint"&gt;&lt;/section&gt;

【讨论】：

Parentnode.append() 在 IE、Edge 或 Safari 中不起作用 developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
我会接受这个答案，因为它适用于我的示例。它仍然不适用于我的实际应用程序，因为我需要将 HTML 字符串附加到视图节点，而 appendChild 需要一个 DOM 节点而不是字符串
只要选择器 (id) 相似，它也适用于 innerHTML。见补充回答。