javascript - 如何在网页中将 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

How to show HTML element as text in webpage?

创建元素并使用 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>