How to write HTML tags without string declaration in vanilla js-CodePudding

If you want to use an HTML element in vanilla JavaScript without using a function like Document.createElement(), you need to use it like this:

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

But is there a way to do this in vanilla JavaScript, just HTML tags without a string declaration (signs like ``)? For example:

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

CodePudding user response：

There is no way you can do this without a declaration (but you still can do this without a string declaration). For that, you have to use JSX in Vanilla JS using this npm package: https://www.npmjs.com/package/jsx-vanilla

This unlock more features like embedding dynamic expressions and values in between the HTML code. For an example:

let x = 4;

const menu = (
  <ul>
    <li>{x-1}</li>
    <li>{x}</li>
    <li>{x 1}</li>
  </ul>
);

const node = document.createRange().createContextualFragment(menu);

Technically, JSX is neither string nor HTML.