如何在不使用React或JSX的情况下，在JavaScript函数中返回类JSX的HTML？

下面提供几种不同的实现方案，按需选择：

方案1：直接返回HTML字符串 #

这是最简单的方式，适合结构简单的场景：

const func = () => {
  return '<h1>Hello World!</h1>';
};

// 挂载到页面
document.body.innerHTML = func();

优缺点：写法极简，但复杂嵌套结构可读性差，没有语法高亮，且需要手动处理转义避免XSS。

方案2：原生DOM API创建元素 #

通过原生JS的DOM操作创建元素，适合需要动态交互的场景：

const func = () => {
  const heading = document.createElement('h1');
  heading.textContent = 'Hello World!';
  // 还可以绑定事件
  heading.addEventListener('click', () => {
    alert('Clicked!');
  });
  return heading;
};

// 挂载到页面
document.body.appendChild(func());

优缺点：完全原生，支持事件绑定、动态修改，安全性高，但写复杂嵌套结构时代码量会比较大。

方案3：模板字符串+标签函数（模拟JSX写法） #

用标签函数封装模板字符串，写法更接近React的JSX，兼顾可读性和灵活性：

版本1：返回HTML字符串 #

// 基础标签函数，处理字符串插值
const html = (strings, ...values) => {
  return strings.reduce((result, str, index) => {
    return result + str + (values[index] ?? '');
  }, '');
};

const func = () => {
  const name = 'World';
  return html`
    <h1>Hello ${name}!</h1>
    <p>This is a simulated JSX-like structure.</p>
  `;
};

document.body.innerHTML = func();

版本2：直接返回DOM元素 #

如果需要直接返回可操作的DOM节点，升级标签函数：

const createElement = (strings, ...values) => {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = strings.reduce((result, str, index) => {
    return result + str + (values[index] ?? '');
  }, '');
  // 若要返回多个元素，可返回 Array.from(tempContainer.children)
  return tempContainer.firstElementChild;
};

const func = () => {
  return createElement`
    <h1>Hello World!</h1>
  `;
};

document.body.appendChild(func());

安全提示：防止XSS攻击 #

如果需要插入用户输入的内容，一定要做HTML转义，避免注入攻击：

// 转义函数
const escapeHtml = (content) => {
  const tempDiv = document.createElement('div');
  tempDiv.textContent = content;
  return tempDiv.innerHTML;
};

// 带转义的标签函数
const safeHtml = (strings, ...values) => {
  return strings.reduce((result, str, index) => {
    const value = values[index];
    return result + str + (value ? escapeHtml(value) : '');
  }, '');
};

// 安全使用示例
const userInput = '<script>alert("XSS")</script>';
const func = () => {
  return safeHtml`
    <h1>Hello ${userInput}!</h1>
  `;
};

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