我正在编写一个应用程序,它通过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吗?那里有一个很好的模式,我可以学习吗?
答案 0 :(得分: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>