Question

我正在编写一个应用程序，它通过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吗？那里有一个很好的模式，我可以学习吗？

Answer 1

Element#innerHTML解析字符串，并将其设置为节点的html内容。您使用Document#createElement创建的节点不是字符串。当您尝试使用Element＃innerHTML将其添加到mountPoint时，它会转换为字符串，并且字符串不具有标识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
}

<section id="mountPoint"></section>

如果CSS中的id和HTML完全相同，那么＃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
}

<section id="mountPoint"></section>

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

1 个答案: