如何在网页中将HTML元素显示为文本及用JavaScript遍历数组生成表格

嘿，我来帮你搞定这两个前端问题～

想要让浏览器把HTML代码当成纯文本显示，而不是解析成元素，有几种实用的方法：

• 手动转义特殊字符
  HTML里的<、>、&这些是特殊字符，必须转成对应的HTML实体才能被当成文本。比如：

  • < → <
  • > → >
  • & → &
    举个例子，如果你想展示<div class="demo">Hello World</div>，就写成：

  <div class="demo">Hello World</div>
  

• 用<pre>+<code>组合保留格式
  如果你需要保留HTML代码的换行和缩进，就把转义后的代码放在<code>标签里，外面再套一个<pre>（预格式化标签，会保留文本的原始格式）：

  <pre><code>&lt;div class="demo"&gt;
    &lt;p&gt;这是一段带格式的HTML文本&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  

• JavaScript动态处理（适合动态内容）
  如果是从后端或者用户输入获取的HTML代码，用JS的textContent属性或者创建文本节点的方式，会自动帮你转义特殊字符，非常省心：

  const htmlCode = '<button onclick="alert(\'Hi\')">点击我</button>';
  const container = document.getElementById('code-box');
  // 直接用textContent赋值，自动转义
  container.textContent = htmlCode;
  

这个需求很常见，我给你写一个完整的实现，包括HTML结构和JS函数：

首先准备HTML的表格骨架：

<!-- 带边框的表格，方便查看 -->
<table id="data-table" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- JS会把数据插入到这里 -->
  </tbody>
</table>

然后写JS函数，核心是遍历数组，动态创建表格行和单元格：

// 模拟的数据源，你可以换成自己的数组
const productData = [
  { id: 1, name: "无线耳机", price: 299 },
  { id: 2, name: "机械键盘", price: 499 },
  { id: 3, name: "电竞鼠标", price: 199 }
];

// 定义渲染函数
function renderArrayToTable(data) {
  const tableBody = document.getElementById('table-body');
  // 先清空tbody，避免重复渲染数据
  tableBody.innerHTML = '';

  // 遍历数组的每一项
  data.forEach(item => {
    // 创建一行<tr>
    const row = document.createElement('tr');

    // 为每个字段创建单元格<td>，并填充内容
    const idCell = document.createElement('td');
    idCell.textContent = item.id;

    const nameCell = document.createElement('td');
    nameCell.textContent = item.name;

    const priceCell = document.createElement('td');
    priceCell.textContent = `¥${item.price}`;

    // 把单元格加到行里
    row.appendChild(idCell);
    row.appendChild(nameCell);
    row.appendChild(priceCell);

    // 把行加到tbody里
    tableBody.appendChild(row);
  });
}

// 调用函数，渲染数据
renderArrayToTable(productData);

这个函数的逻辑很清晰：先清空表格内容防止重复，然后用forEach遍历数组，每一项生成一行，把每个字段对应到单元格，最后把行插入表格。如果你的数组字段不同，只需要调整创建单元格的部分就行～

内容的提问来源于stack exchange，提问作者Aju John