使用.append/.appendChild向DOM插入元素节点失败求助

核心原因 #

1. 跨文档节点限制
   你打印的globalAttributes[0]虽然是HTMLElement，但它大概率属于另一个JSDOM文档实例，而非你最终用来写入文件的doc对象。JSDOM遵循浏览器DOM规则：一个节点只能属于一个文档，跨文档直接调用.append/.appendChild会静默失败（无报错，但节点不会被渲染）。
   验证方式：执行console.log(globalAttributes[0].ownerDocument === doc)，如果返回false，就实锤了这个问题。

2. innerHTML的转义问题
   你用innerHTML插入时文本显示但未渲染，是因为globalAttributes[0].outerHTML本身是HTML转义后的字符串（比如<代替<），直接插入会被当成纯文本解析，不会转化为DOM节点。

解决办法 #

针对跨文档节点问题

用JSDOM提供的adoptNode()方法，把外部节点导入到当前文档后再插入：

// 先将节点导入当前doc文档实例
const adoptedNode = doc.adoptNode(globalAttributes[0]);
// 再执行插入
attributesDetailsElement.appendChild(adoptedNode);

或者直接从原始HTML字符串重新创建节点（适合节点已被转义的情况）：

const tempContainer = doc.createElement('div');
// 先还原转义的HTML实体
const unescapedHtml = globalAttributes[0].outerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
tempContainer.innerHTML = unescapedHtml;
// 插入解析后的节点
attributesDetailsElement.appendChild(tempContainer.firstChild);

针对innerHTML渲染问题

先还原转义的HTML实体，再插入：

const unescapedHtml = globalAttributes[0].outerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
attributesDetailsElement.innerHTML = unescapedHtml;

验证步骤 #

插入节点后，执行console.log(attributesDetailsElement.innerHTML)，如果能看到<code>标签的原始HTML结构，说明节点已成功添加，等待写入文件即可。

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