使用JavaScript DOM创建表格时HTML标签显示为纯文本的问题排查

你遇到的这个问题我之前帮好几个开发者排查过，核心原因是你用错了插入HTML内容的方式——导致<ul>和<li>完全没被解析成HTML元素，反而变成了纯文本。

问题根源 #

当你执行document.createTextNode(str)时，这个方法的作用是创建纯文本节点，浏览器会自动把字符串里的<、>等HTML特殊字符转义成实体（比如<变成<）。所以你拼接的列表标签根本不会被识别成HTML结构，只会原封不动地显示成文字。

两种解决方案 #

方案1：用innerHTML直接插入HTML字符串（简单快捷） #

直接把你拼接好的HTML字符串赋值给单元格的innerHTML属性，浏览器会自动解析其中的标签：

修改代码中处理配料列表的部分：

// 替换原有的cell和cellText创建代码
var cell = document.createElement("td");
cell.innerHTML = str; // 用innerHTML替代createTextNode，直接解析HTML
row.appendChild(cell);

方案2：用原生DOM方法创建列表（更安全） #

如果你的mydata来自不可信来源（比如用户输入），innerHTML可能存在XSS攻击风险，更推荐用纯DOM方法一步步构建列表：

var cell = document.createElement("td");
var ul = document.createElement("ul");

// 循环创建每个列表项
for (const [p, val] of Object.entries(mydata[i].ingredients)) {
  var li = document.createElement("li");
  li.textContent = `${p}:${val}`; // 用textContent设置纯文本，避免注入风险
  ul.appendChild(li);
}

cell.appendChild(ul);
row.appendChild(cell);

额外提醒 #

你的原代码最后漏掉了把创建好的行添加到表格主体的关键步骤，记得在循环内部最后加上：

tblBody.appendChild(row);

不然所有创建的行都不会显示到页面上哦！

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