使用node-html-parser无法设置innerHTML？求原因解析

node-html-parser 库的 DOM 节点对象并非浏览器原生 DOM，它没有实现原生的 innerHTML/innerText 属性 setter，直接对这些属性赋值不会触发节点内容的更新，这就是你设置后内容依旧不变的核心原因。

正确修改节点内容的方法 #

1. 使用 setTextContent() 方法修改纯文本内容 #

如果仅需设置纯文本内容，直接调用节点的 setTextContent() 方法：

const { parse } = require('node-html-parser');

const html = `<div><p>原段落内容</p></div>`;
const root = parse(html);

// 定位所有<p>元素
const pElements = root.querySelectorAll('p');
pElements.forEach(p => {
  p.setTextContent('test');
});

console.log(root.toString()); // 输出修改后的完整HTML

2. 使用 setContent() 方法设置带HTML标签的内容 #

如果需要设置包含HTML结构的内容，使用 setContent() 方法：

pElements.forEach(p => {
  p.setContent('<span style="color:red">test</span>');
});

3. 替换整个节点 #

如果需要完全替换<p>节点本身，可使用 replaceWith() 方法：

const newPElement = parse('<p>test</p>');
pElements.forEach(p => {
  p.replaceWith(newPElement);
});

注意：修改完成后，必须通过根节点的 toString() 方法序列化才能获取更新后的HTML内容，直接打印节点对象无法体现最新状态。

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