如何在网页中将html元素显示为文本

Question

我想循环这个数组并将数据显示到一个表中。

var dataM = [
          {
              "id": "1",
              "name": "My #1",
              "thumbnailUrl": "image/8.gif",
              "price": 20
            },
            {
              "id": "2",
              "name": "<img onerror='window.document.body.innerHTML = \"<h1>XSS</h1>\";' src=''> ",
              "url": "image/10.gif",
              "price": 10
            }
        ];

Javascript 函数：

function loadData() {
  var data = "";
  for(var i = 0; i < dataM.length; i++) {
    data += "<tr>";
    var tempData = dataM[i];

    Object.keys(tempData).forEach(function(key) {
        data += "<td><code>" + tempData[key] + "</code></td>";
    });
    data += "</tr>";
  }
  var tbody = document.getElementsByTagName('tbody');
  tbody[0].innerHTML = data;
}

Answer 1

如何在网页中将 HTML 元素显示为文本？

创建元素并使用innerText属性。

 var dataM = [{ "id": "1", "name": "My #1", "thumbnailUrl": "image/8.gif", "price": 20 }, { "id": "2", "name": "<img onerror='window.document.body.innerHTML = \\"<h1>XSS</h1>\\";' src=''> ", "url": "image/10.gif", "price": 10 } ]; function loadData() { var tbody = document.getElementsByTagName('tbody')[0]; for (var i = 0; i < dataM.length; i++) { var tr = document.createElement('tr'); var tempData = dataM[i]; Object.keys(tempData).forEach(function(key) { var td = document.createElement('td'); var code = document.createElement('code'); code.innerText = tempData[key]; td.appendChild(code); tr.appendChild(td); }); tbody.appendChild(tr); } } loadData();

 <table> <tbody> </tbody> </table>