Good day fellow devs! Is it possible to return a jsx format from a function without using react? My project is just pure Es6 and HTML. Here's what I want to do, I want to create a separate files for functions and HTML then call the HTML format files in the functions.

For example, here's my main.js:

import renderHTML from './display/render.js';
import createElement from './functions/createElement.js';

var popup = document.getElementById('popup-container');

const HTML = `${renderHTML}`;

const Fragment = createElement(HTML);
popup.appendChild(Fragment);

Then in my renderHTML file where it's jsx format, here's the content:

export default function renderHTML() {
 return (
  <h1>I am the content! Rendered successfully!</h1>
 )
}

There, hope that made sense lol.. But yeah, the output of that is either its code or object. Any help or advice if I'm doing it wrong is much appreciated. Thank you so much and have a nice day ahead!