JavaScript创建XHTML表格显示异常的问题及解决方法

我之前维护老XHTML项目的时候也踩过一模一样的坑！

问题根源 #

XHTML是严格基于XML的标记语言，所有元素都必须归属到http://www.w3.org/1999/xhtml这个命名空间下。而普通HTML是无命名空间的，所以用createElement()创建元素在HTML里能正常工作，但到了XHTML环境中，浏览器会把这些无命名空间的元素当成纯文本节点处理，自然就渲染成一行文字，而非预期的表格结构。

修复方案 #

只需要把所有创建元素的createElement()调用替换成createElementNS()，并指定XHTML的命名空间即可。举个完整的表格创建示例：

// 创建带命名空间的表格元素
const table = document.createElementNS('http://www.w3.org/1999/xhtml', 'table');
const tr = document.createElementNS('http://www.w3.org/1999/xhtml', 'tr');
const td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');

// 填充内容并组装结构
td.textContent = '测试单元格内容';
tr.appendChild(td);
table.appendChild(tr);

// 添加到页面
document.body.appendChild(table);

这样创建出来的表格元素会被XHTML解析器正确识别，就能正常渲染出表格结构了。

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