cloneNode克隆节点后innerText与原节点不一致，如何解决？

问题原因 #

问题核心在于浏览器对DOM节点的文本处理逻辑差异：

• 已经插入DOM树的原节点，浏览器会自动做文本排版规范化：把源码里的换行、连续空格/制表符等空白字符合并成单个空格，同时忽略元素内部的换行缩进。
• 克隆后的节点默认没插入DOM树，浏览器不会对它应用排版规则，所以保留了HTML源码里原始的换行和空格。

解决方案 #

方案1：插入克隆节点到DOM后再获取innerText

把克隆节点临时插入DOM（比如body或隐藏容器），让浏览器完成排版处理，之后再获取innerText就能和原节点一致。如果不需要保留克隆节点，获取后可以移除：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <p>Hello
      World</p>
    <script>
      const p = document.querySelector('p');
      const pCloned = p.cloneNode(true);
      
      // 临时插入克隆节点到DOM
      document.body.appendChild(pCloned);
      const pClonedText = pCloned.innerText; // 结果：Hello World
      // 可选：移除临时插入的节点
      document.body.removeChild(pCloned);
      
      const pText = p.innerText; // 结果：Hello World
      console.log('pText', pText);
      console.log('pClonedText', pClonedText);
      console.log(pText === pClonedText); // 输出：true
    </script>
  </body>
</html>

方案2：手动规范化文本内容

如果不想操作DOM，可以直接模拟浏览器的排版规则，手动处理文本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <p>Hello
      World</p>
    <script>
      const p = document.querySelector('p');
      const pCloned = p.cloneNode(true);
      
      // 自定义规范化函数：替换所有连续空白为单个空格，再去除首尾空白
      const normalizeText = node => node.innerText.replace(/\s+/g, ' ').trim();
      
      const pText = normalizeText(p); // 结果：Hello World
      const pClonedText = normalizeText(pCloned); // 结果：Hello World
      console.log('pText', pText);
      console.log('pClonedText', pClonedText);
      console.log(pText === pClonedText); // 输出：true
    </script>
  </body>
</html>

补充说明 #

• 如果只是需要原始文本内容一致（不需要排版后的结果），可以直接用textContent属性，它会保留节点的所有原始空白字符，原节点和克隆节点的textContent是完全一致的。
• 方案1更适合复杂节点（比如包含多个子元素、有CSS样式影响文本显示的场景），完全遵循浏览器的排版逻辑；方案2适合简单文本节点，操作更轻便。

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