如何在HTML字符串变量上使用Document的getElementById()方法？

你手里的htmlVar是纯字符串格式的HTML代码，并没有被加入当前页面的DOM结构，直接用document.getElementById("demo")肯定查不到目标元素。得先把这段字符串转换成可操作的DOM节点，再进行查询，具体代码如下：

let htmlVar=`
<!DOCTYPE html>
 <html>
  <body>
   <h1>The Document Object</h1>
   <h2 id="demo">The getElementById() Method</h2>
  </body>
 </html>
`

// 创建临时DOM容器
const tempContainer = document.createElement('div');
// 将字符串HTML注入容器，生成DOM结构
tempContainer.innerHTML = htmlVar;
// 在临时容器内查找目标元素
const demoElement = tempContainer.getElementById('demo');

// 获取并处理内容
if (demoElement) {
  console.log(demoElement.textContent); // 控制台输出目标内容
  // 如果要在页面上展示，可添加这行：
  // document.body.append(demoElement.textContent);
}

核心逻辑是：getElementById方法不仅能在全局document上调用，也能在任意DOM元素节点上调用，所以我们可以用临时容器来承载字符串生成的DOM树，再在这个容器范围内查询元素。

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