How can I render HTML from a string? [duplicate]

Question

I have a database variable from which I get this, for example:

hello, `<br />` have a good day,

It prints the <br /> to my screen. How could I tell html that
is a line break?

My variable is called greeting and it is an array from which I use a for to print everything, but I used that little text as an example.

So I tried with innerHTML but it doesn't work:

  <i id="break" class="textTitle">{{ greeting }}</i>
      <script>
         document.getElementById("break").innerHTML = "<br/>";
      </script>

It should work just fine without any changes. It's probably your CSS that overrides this behavious. — Konrad
– Konrad, Commented Aug 24, 2022 at 16:15
Your question was confusingly specific. It doesn't really relate to line breaks, but HTML in general. I've revised the title to ask a more general question. — isherwood
– isherwood, Commented Aug 24, 2022 at 16:24
Does your string actually have backticks in it, or was that just an attempt at formatting in this post? — isherwood
– isherwood, Commented Aug 24, 2022 at 16:26
Your embedded script element is an anti-pattern with respect to React. It might help if you'd provide a bit more context. — isherwood
– isherwood, Commented Aug 24, 2022 at 16:27
thanks for your help, but it still doesn't work for me :(, I have this text in a timeline, I already tried to modify the css as you mention but I don't know what the error is — ALAIN TORRES
– ALAIN TORRES, Commented Aug 24, 2022 at 17:56

isherwood · Accepted Answer · 2022-08-24 16:21:00Z

2

Use the dangerouslySetInnerHTML prop:

<i id="break" class="textTitle" dangerouslySetInnerHTML={greeting}></i>

Your original code uses innerText under the hood to set the content of the element. That's why it gets interpreted as text instead of HTML code.

<i id="break" class="textTitle">{{ greeting }}</i>

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Aug 24, 2022 at 16:18

kess

1,3299 silver badges25 bronze badges

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

2 Comments

Thanks for your answer, I tried like this but it doesn't work :(

Your question had react in the tags so I provided a solution for react, but I see now that you changed it to angular

Gamaray · Accepted Answer · 2022-08-24 16:24:15Z

-1

In must be something to do with the way you interpreter is treating the text, as this should normally work fine:

document.getElementById("break").innerHTML = "<br/>";

<body>
 <h1>Hi</h1>
 <h1 id="break"></h1>
 <h1>There</h1>
</body>

answered Aug 24, 2022 at 16:24

Gamaray

15111 bronze badges

thanks for your reply, i tried that way but it doesn't work :(