Edge/IE11中document.createProcessingInstruction()方法异常问题咨询

我之前正好碰到过一模一样的问题，IE11和基于EdgeHTML内核的旧版Edge对document.createProcessingInstruction()的实现确实有非常严格的限制，和Chrome这类现代浏览器的宽松处理完全不一样。

问题根源 #

IE11/旧Edge的这个方法实现严格遵循了早期DOM规范的要求，主要有两个核心限制：

1. 文档上下文限制：这个方法仅允许在XML/XHTML文档中调用，如果你的页面是普通的HTML文档（也就是document是HTMLDocument类型），直接调用就会抛出NotSupportedError——哪怕方法本身存在，浏览器也会拒绝在HTML环境中创建XML处理指令节点。
2. 目标名称限制：就算在XML文档中使用，处理指令的目标名称（第一个参数）也必须符合XML规范：
   • 不能以数字、标点符号开头
   • 不能包含空格、&、<、>等特殊字符
   • 绝对不能以xml（不区分大小写，比如XML、Xml都不行）开头

你在Chrome中用document.createProcessingInstruction("a", "b")能成功，是因为现代浏览器放宽了限制，允许在HTML文档中创建这类节点。

可行的解决方案 #

1. 切换到XML文档上下文操作

如果必须使用处理指令节点，可以先创建一个独立的XML文档，在这个文档中创建处理指令，之后再按需导入到HTML文档中：

// 创建一个空的XML文档
const xmlDoc = document.implementation.createDocument("", "", null);
// 在XML文档中创建合法的处理指令
const piNode = xmlDoc.createProcessingInstruction("a", "b");
// 若需要将节点导入到当前HTML文档（注意HTML文档可能不会渲染它）
const importedPi = document.importNode(piNode, true);

2. 替换为HTML兼容的方案

如果你的需求只是在页面中添加元信息或注释类内容，完全可以用HTML原生支持的方式替代，避免跨浏览器兼容问题：

• 用HTML注释：<!-- 这里是你的自定义信息 -->
• 用<meta>标签：<meta name="your-custom-key" content="your-custom-value">

总结 #

IE11和旧Edge的实现更偏向于早期规范的严格要求，而现代浏览器做了兼容性放宽。如果一定要用处理指令，就得切换到XML文档上下文；如果只是实现类似功能，优先用HTML原生的替代方案会更稳妥。

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