如何将包含 HTML 的 JSON 解析为 HTML

Question

我想解析一个 JSON 对象 response.indexText，其中包含 HTML 标签（使用 JSONLint 验证）。

{
  "indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
}

进入<div id="indexText"></div> 但是当我使用 (EDIT after first answer.window.onload inside and outside 并没有改变问题。)

window.onload = function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let response = JSON.parse(xhttp.responseText);
        document.getElementById("indexText").innerHTML = response.indexText;
    }
};
xhttp.open("GET", "./json/en.json", true);
xhttp.send();  
}; 

并且重新加载页面，它将是空的。出了什么问题？如何解析 JSON 内容，以便客户端将内容呈现为 HTML？

我正在尝试做的事情。目前我的页面包含多个 *.html 文件。所有页面都有相同的导航栏和相同的页脚。只有内容会改变。现在我正在尝试将内容存储在我的 JSON 文件中，以便在单击导航链接时可以更改文本。

Answer 1

将您的代码放入window.onload，您将获得所需的结果。

检查以下工作代码：

window.onload = function() {
var response = {
  "indexText": "<div id=\"content-home\"><h1> Hello World! <\/h1> <p>Some text.<\/p><p>Some more text.<\/p></div>"
};

document.getElementById("indexText").innerHTML = response.indexText;
};

<div id="indexText"></div>

在这里工作 JSfiddle：https://jsfiddle.net/y2rkhp8g/1/