更改 HTML 内容时，Javascript 打印代码而不是执行它答案

【问题标题】：Javascript printing code instead of executing it when changing the contents of HTML更改 HTML 内容时，Javascript 打印代码而不是执行它
【发布时间】：2019-01-18 10:36:13
【问题描述】：

我正在检索 JSON 文件的正文元素，它实际上是 html 代码。然后我试图将它添加到我的 HTML 中，但不是运行它作为 p 或标题元素打印的代码（我想）。谁能告诉我我做错了什么我无法在其他讨论中找到答案。

<div id="title">

</div>


<div id="body">

</div>

<script>
  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = data[0].title;
    document.getElementById("body").innerHTML = data[0].body;
  }
</script>

【问题讨论】：

您必须将 data[i] 添加/添加到元素中。不设置值（如 html/innerHtml/text）
你正在用这些语句覆盖正文中的所有 HTML 内容。
为什么要在 json 中返回 html？首先？为什么不直接返回 html？
我尝试了追加，但这对我也不起作用？可以给我举个例子吗？ @Ashutosh
这就是数据的呈现方式。 body 元素写成一个 HTML 字符串 @Difster

标签： javascript html css json

【解决方案1】：

您可以使用DOMParser 将带有 HTML 实体的字符串解析为 HTML 字符串，然后可以将其呈现为 DOM 元素。

document.getElementById("body").innerHTML = htmlDecode("&lt;ul&gt; \n &lt;li&gt;Place item in the &lt;strong&gt;Garbage Bin.&lt;/strong&gt;&lt;/li&gt; \n&lt;/ul&gt;");

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

&lt;div id="body"&gt;&lt;/div&gt;

你可以这样使用：

<div id="title"></div>
<div id="body"></div>

<script>

  function htmlDecode(input) {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = htmlDecode(data[0].title);
    document.getElementById("body").innerHTML = htmlDecode(data[0].body);
  }
</script>

感谢this DOMParser 的答案。

【讨论】：

【解决方案2】：

我使用了 Jquery 的“unescape”功能。你可以阅读它 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape

unescape() 函数计算一个新字符串，其中十六进制转义序列被替换为它所代表的字符。转义序列可能由转义之类的函数引入。通常，decodeURI 或 decodeURIComponent 优于 unescape。

请试试这个，希望对你有帮助。谢谢

var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    var title_ = $("<p/>").html(data[0].title).text(); 
    var body_ = $("<p/>").html(data[0].body).text(); 
    //$('#body').append($.parseHTML(unescape(data[0].body)));
    $('#title').append(title_);
    $('#body').append(body_);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">

</div>

<div id="body">

</div>

您必须将 data[i] 附加/前置到元素中。不设置值（如ht）

【讨论】：

非常感谢。你能解释一下为什么我的解决方案不起作用吗？你有纯 JavaScript 解决方案吗
我不太喜欢纯原生的 JavaScript。但是，是的，在本机中可能有另一种解决方案。您的 data[0].title 和其他人正在返回 utf 编码字符串，（标记在网络中以编码格式传播）因此，当您收到 htem 时，您可能希望将它们转换回原始形式。这就是转义/编码/取消转义/解码出现的地方。