如何在vanillajs中编写没有字符串声明的HTML标记

Question

如果你想在普通JavaScript中使用HTML元素而不使用Document.createElement()这样的函数，你需要这样使用它：

const App = `<h1>Hello, world</h1>`;

但是，有没有一种方法可以在普通的JavaScript中做到这一点，只需要HTML标记而不需要字符串声明(像"这样的符号(？例如：

const App = <h1>Hello, world</h1>;

Answer 1

没有声明是不可能做到的(但没有字符串声明仍然可以做到(。为此，您必须使用此npm包在Vanilla JS中使用JSX：https://www.npmjs.com/package/jsx-vanilla

这解锁了更多的功能，比如在HTML代码之间嵌入动态表达式和值。例如：

let x = 4;
const menu = (
<ul>
<li>{x-1}</li>
<li>{x}</li>
<li>{x+1}</li>
</ul>
);
const node = document.createRange().createContextualFragment(menu);

从技术上讲，JSX既不是字符串也不是HTML。