1

How do we render HTML inside a div tag?

Here is my lightning-layout-item:

<lightning-layout-item class="slds-p-around_xxx-small" size="12">
    <div>{o.orderEntrySteps}</div>
</lightning-layout-item>

Here is the HTML I'm trying to render:

<p><b style="font-size: 24px;">Details</b></p><ul><li style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li style="text-align: justify;">Aliquam non justo nec nisi scelerisque auctor fermentum non dui.</li><li style="text-align: justify;">Quisque facilisis metus id porttitor vestibulum.</li><li style="text-align: justify;">Aliquam ullamcorper odio et magna venenatis sodales.</li><li style="text-align: justify;">Suspendisse posuere massa in egestas laoreet.</li></ul><p><b style="font-size: 24px;">Steps</b></p><ol><li style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li style="text-align: justify;">Aliquam non justo nec nisi scelerisque auctor fermentum non dui.</li><li style="text-align: justify;">Quisque facilisis metus id porttitor vestibulum.</li><li style="text-align: justify;">Aliquam ullamcorper odio et magna venenatis sodales.</li><li style="text-align: justify;">Suspendisse posuere massa in egestas laoreet.</li><li style="text-align: justify;">Nulla tempor neque vulputate, venenatis tellus a, fermentum quam.</li><li style="text-align: justify;">Suspendisse cursus lorem vel orci feugiat, ut facilisis justo laoreet.</li><li style="text-align: justify;">Nullam vitae enim quis lectus venenatis dignissim.</li><li style="text-align: justify;">Morbi maximus tortor ac eleifend pulvinar.</li></ol>

If you put the above code into a HTML editor, it would be rendered like below. How do I get it rendered that way when I put it inside a div in my lightning web component? enter image description here

Improve this question
4
  • To clarify: you mean o.orderEntrySteps is an HTML string? Commented Feb 9, 2021 at 23:29
  • That's right @MatthewSouther Commented Feb 9, 2021 at 23:31
  • Have you tried lightning-formatted-rich-text? Commented Feb 9, 2021 at 23:40
  • Just tried it, I am still not getting the rendered output, just plain HTML. Commented Feb 10, 2021 at 0:01

1 Answer 1

Reset to default
3

You can use a lightning-formatted-rich-text component to render the HTML.

This component supports the tags in your example, such as b, p, ol, and ul. Depending on your actual HTML, you will want to check the docs to make sure all tags you intend to use are supported.

Improve this answer
5
  • Just tried it, I am still not getting the rendered output, just plain HTML Commented Feb 10, 2021 at 0:01
  • I just tried your HTML string with lightning-formatted-rich-text and it worked in my dev org. I had to escape all double quote characters, i.e. replacing " with \". Commented Feb 10, 2021 at 0:13
  • How did you replace the " with \? Commented Feb 10, 2021 at 0:15
  • I did it with find/replace in VS Code, but you could use replaceAll() to do the same at runtime, see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Commented Feb 10, 2021 at 0:19
  • Thanks Matthew .It worked, but still need to work on it Commented Feb 10, 2021 at 0:30

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.