How to write HTML tags without string declaration in vanilla js

Question

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>;

Nope, you need JSX for that

CertainPerformance
– CertainPerformance

2022-04-09 03:59:56 +00:00
Commented Apr 9, 2022 at 3:59 — CertainPerformance
– CertainPerformance, Commented Apr 9, 2022 at 3:59
Read this doc about JSX in React Introducing JSX

nurmdrafi
– nurmdrafi

2022-04-09 04:10:53 +00:00
Commented Apr 9, 2022 at 4:10 — nurmdrafi
– nurmdrafi, Commented Apr 9, 2022 at 4:10

Amit · Accepted Answer · 2022-04-09 04:15:45Z

1

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.

answered Apr 9, 2022 at 4:15

Amit

1,1932 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to write HTML tags without string declaration in vanilla js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related