Question

我正在检索JSON文件的body元素，它实际上是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>

Answer 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;
}

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

您可以这样使用：

<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答案。

Answer 2

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

unescape（）函数计算一个新字符串，该字符串中的十六进制转义序列被其表示的字符替换。转义序列可以由转义之类的函数引入。通常，与unescape相比，decodeURI或encodeURIComponent更为可取。

请尝试此操作，希望对您有所帮助。 thnx

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>

您必须将数据[i]附加/添加到元素上。未设置值（如ht）

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

2 个答案: