Edge中element.append()失效，原生JS如何不用innerHTML添加元素文本？

首先明确说：element.append()确实是innerHTML的安全且合适的替代方案——它直接操作DOM节点，避免了innerHTML带来的XSS风险，也更符合原生DOM操作的规范。你遇到的报错，是因为旧版Edge（基于EdgeHTML引擎的那个版本，不是现在的Chromium版）根本没实现Element.append()这个API，它是ES2017才加入的，旧Edge对现代JS API的支持不全。

下面给你几个可行的解决办法：

1. 用appendChild()替代（原生兼容方案） #

appendChild()是所有主流浏览器（包括旧Edge）都支持的经典API，唯一要注意的是：它只能接收单个DOM节点，不能直接传字符串文本。所以如果要添加文本，得先把文本转成TextNode，多个元素/文本的话要多次调用：

// 你的原代码片段改造示例
const parent = document.createElement("h4");
const txtNode = document.createTextNode("这是一段文本");
const spanElement = document.createElement("span");
spanElement.textContent = "这是一个span元素";

// 逐个添加节点
parent.appendChild(txtNode);
parent.appendChild(spanElement);
// 如果还要加文本，再创建TextNode
parent.appendChild(document.createTextNode("追加的文本"));

2. 封装一个兼容版的append函数 #

如果不想每次都写这么麻烦，可以自己封装一个函数，模拟append()的行为，支持同时添加多个节点或文本：

function appendElement(parent, ...children) {
  children.forEach(child => {
    if (typeof child === "string") {
      parent.appendChild(document.createTextNode(child));
    } else if (child instanceof Node) {
      parent.appendChild(child);
    }
  });
}

// 使用示例
const parent = document.createElement("h4");
const span = document.createElement("span");
span.textContent = "测试span";

appendElement(parent, "开头文本", span, "结尾文本");

这个函数会自动处理字符串（转成TextNode）和DOM节点，和append()的用法几乎一致，而且能完美兼容旧Edge。

3. 升级到Chromium版Edge（推荐） #

现在微软已经停止支持旧版Edge了，主流的Edge都是基于Chromium引擎的，完全支持Element.append()以及所有现代JS API。如果你的用户群体可以覆盖到升级提示，这是一劳永逸的办法。

最后再强调下：append()（或兼容的替代方案）确实比innerHTML更安全，因为它不会解析HTML字符串，避免了恶意脚本注入的风险，是操作DOM内容的更佳实践。

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