I have implemented a fetch function to retrieve data from a SharePoint form that is currently stored in a SharePoint list, and then display it on an HTML page.
In my code snippet available at this link, the expected output matches the actual output perfectly. The fetched data is appended to a <ul> element inside a <li> element (as the data is received as a string rather than being properly retrieved through fetch).
However, the issue I'm encountering with the fetch operation is that instead of directly adding the data to the <ul> element, it gets added within a <div> element inside the <ul>. This might be due to the fact that <div> elements are not allowed within a <ul>.
1.) Why does the data get inserted as
<ul><div> </div></ul>2.) What would be the best approach to rectify this situation?
This is how the content is being displayed based on the inspect element:
<h4> Training </h4>
<ul>-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</ul>
Lastly, here's a snippet of my JS/HTML code: