在JavaScript/React中如何通过document.querySelector插入HTML元素？

原生JavaScript方式 #

如果用原生JS操作DOM，想要插入HTML结构而非纯文本，别用textContent，改用innerHTML属性即可：

document.querySelector('#test123').innerHTML = '<span id="monitor_metric_1"></span>';

这个属性会把传入的字符串解析为HTML元素，直接插入到目标节点中，刚好匹配你的需求。

如果要避免XSS风险（比如插入内容包含用户输入），更推荐用DOM API手动创建元素后插入：

const target = document.querySelector('#test123');
// 先清空目标元素原有内容
target.innerHTML = '';
const span = document.createElement('span');
span.id = 'monitor_metric_1';
target.appendChild(span);

React环境下的推荐做法 #

在React中不建议直接用document.querySelector操作原生DOM，更符合React范式的是通过状态控制渲染：

import { useState } from 'react';

function YourComponent() {
  const [showMetricSpan, setShowMetricSpan] = useState(true);

  return (
    <div id="test123">
      {showMetricSpan && <span id="monitor_metric_1"></span>}
    </div>
  );
}

如果确实需要操作DOM（比如集成第三方库），可以用React的useRef钩子获取DOM节点：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const testRef = useRef(null);

  useEffect(() => {
    if (testRef.current) {
      // 用innerHTML插入
      testRef.current.innerHTML = '<span id="monitor_metric_1"></span>';
      // 或者用DOM API创建元素插入
      const span = document.createElement('span');
      span.id = 'monitor_metric_1';
      testRef.current.appendChild(span);
    }
  }, []);

  return <div id="test123" ref={testRef}></div>;
}

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