0

I want to create a function and have it return an html like in react (Without use react or jsx)

const func = () => {
  return (
    <h1>Hello World!</h1>
  );
}
yep shushi
  • 13
  • 2

1 Answers1

1

Without use react or jsx

If you don't want to use JSX then clearly you can't use JSX. You can return a string:

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

document.querySelector('#test').innerHTML = func();
<div id="test"></div>

Or perhaps an element:

const func = () => {
  const el = document.createElement('h1');
  el.innerText = 'Hello World!';
  return el;
}

document.querySelector('#test').appendChild(func());
<div id="test"></div>
David
  • 208,112
  • 36
  • 198
  • 279
  • And without using quotes or createelement – yep shushi Jan 19 '23 at 16:46
  • @yepshushi: What do you mean? What exactly are you trying to do? – David Jan 19 '23 at 16:46
  • return an html in the function instead of a string – yep shushi Jan 19 '23 at 16:49
  • 1
    @yepshushi: And what do you consider to be "an html"? If you want to use JSX without using React, [that may be possible](https://stackoverflow.com/q/30430982/328193). But in the question you *explicitly* state that you *don't* want to use JSX. Now you're also stating that you don't want to use strings. Or elements. Do you even want to use JavaScript at all? Are you even using a web browser? What are these random restrictions and what problem are you actually trying to solve? Please clarify the question instead of adding arbitrary requirements in comments. – David Jan 19 '23 at 16:51
  • sorry, what I'm trying to explain is that I wanted the component function to write as html ``return (

    )``` and I was wondering if there was a way to do that without using jsx or babel, and I wanted it to return as a string when the function was executed, for example ```component() // => "

    "```     – yep shushi Jan 19 '23 at 17:06
  • @yepshushi: *"and I wanted it to return as a string when the function was executed"* - Then that would be the first example in this answer, using a string. Again, if you don't want to use JSX then you can't use JSX. Or maybe you're looking for [templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)? Or [template script elements](https://stackoverflow.com/q/4912586/328193)? – David Jan 19 '23 at 17:10
  • I'm currently using ```return "

    "``` and I want it to look like this ```return (

    )```     – yep shushi Jan 19 '23 at 17:13
  • a bit confusing, i know – yep shushi Jan 19 '23 at 17:13
  • Why do you want it to look like that? That's not a string. – mykaf Jan 19 '23 at 17:13
  • @yepshushi: You're just going in circles. The question you're asking is, "How can I use JSX without using JSX?" The answer is, "You can't. For reasons which should be obvious." There may be some other underlying problem you're trying to solve, but you're obscuring that problem with what you *think* is the approach to take, but you are mistaken. – David Jan 19 '23 at 17:14
  • right, that was my doubt, thanks – yep shushi Jan 19 '23 at 17:15