如何将HTML字符串解析为节点并获取其高度（不插入真实DOM）

直接通过$(el).height()获取未插入DOM的节点高度会返回0，因为浏览器不会为不在DOM树中的节点计算布局尺寸。你可以通过创建一个隐藏的离线DOM容器来解决这个问题，具体实现如下：

实现思路 #

创建一个脱离页面可视区域的隐藏容器，将解析后的HTML节点临时放入其中——容器不会在页面显示，但浏览器会正常计算节点的布局高度，获取高度后再移除节点和容器即可。

示例代码 #

const arrOfHtml = ["<div>Test</div>", "<div><h2>Test2</h2></div><div><p>Im not ok</p></div>"];

// 创建隐藏的离线容器，确保不影响页面布局但能正常渲染
const $hiddenContainer = $('<div style="position: absolute; left: -9999px; top: -9999px; visibility: hidden;"></div>').appendTo('body');

arrOfHtml.forEach(htmlStr => {
  // 解析HTML字符串并添加到隐藏容器
  const $nodes = $(htmlStr).appendTo($hiddenContainer);
  // 若HTML字符串包含多个顶级节点，遍历获取每个节点的高度
  $nodes.each(function() {
    console.log('节点高度:', $(this).height());
  });
  // 临时节点用完后移除，避免容器冗余
  $nodes.remove();
});

// 最后清理隐藏容器
$hiddenContainer.remove();

关键细节说明 #

• 容器样式使用visibility: hidden而非display: none：display: none的元素不会触发渲染，无法获取高度；visibility: hidden仅隐藏元素，布局计算不受影响。
• 容器定位到页面外：left: -9999px; top: -9999px确保容器不会意外出现在可视区域，同时不占用正常页面布局空间。
• 全局样式兼容：该方法会继承页面的全局CSS样式，计算出的高度与节点真实插入页面时的高度一致。

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