0

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

4
  • To clarify: you mean o.orderEntrySteps is an HTML string? Feb 9 at 23:29
  • That's right @MatthewSouther
    – sumchans
    Feb 9 at 23:31
  • Have you tried lightning-formatted-rich-text?
    – Nick Cook
    Feb 9 at 23:40
  • Just tried it, I am still not getting the rendered output, just plain HTML.
    – sumchans
    Feb 10 at 0:01
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.

5
  • Just tried it, I am still not getting the rendered output, just plain HTML
    – sumchans
    Feb 10 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 \". Feb 10 at 0:13
  • How did you replace the " with \?
    – sumchans
    Feb 10 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/… Feb 10 at 0:19
  • Thanks Matthew .It worked, but still need to work on it
    – sumchans
    Feb 10 at 0:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.