javascript - <div> getting posted inside of a <ul>

Question

I am using a fetch to gather data from a SharePoint form that's data is currently stored in a SharePoint list, and I am posting it to an HTML page.

In my fiddle here, the actual output is my expected output which is perfect. The data is appended to a <ul> inside of a <li>(this has to do with the data being a string and not being pulled through fetch[I am assuming]).

The issue I am facing with the fetch is that the data getting pulled through, instead of posting directly to the <ul>, it is posting to a <div> inside of the <ul>, which if I remember correctly, <div> elements are not permitted within a <ul>.

1.) Why is the data getting posted inside of <ul><div> </div></ul>? Is it because the column on the form corresponding with the data is "Multiple lines of text entry"?

2.) What is the best way to go about correcting this?

Here is a screenshot of how it is posting:

In the inspect element, this is how it says it is posting:

<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>

Finally, here is a snippet of my JS/HTML.

function loadData(url) {
    url = partUrl + "/_api/web/lists/getbytitle('ListName')/items?$select=Deliverables,MajorTasks,Actions,Support,Resource,Team,Training,Upcoming,WeekOf,Travel";
    return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
      .then((r) => {
        if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
        return r.json();  // parse JSON
      })
      .then((data) => data.d.results);
  }
  loadData()
    .then((results) => {
        const data = results;
        var listContent = '';
              
       for (var i = 0; i < data.length; i++) {
         listContent += '<li data-weekOf="'+data[i].WeekOf+'">';
         listContent += '<h2>' + data[i].Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         if(data[i].MajorTasks !== null){
            listContent += '<ul>' + "- " + data[i].MajorTasks + '</ul>';
         }else{
              listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Deliverables Submitted</h4>';
                 if(data[i].DeliverablesSubmitted !== null){
         listContent += '<ul><li>' + "- " + data[i].DeliverablesSubmitted + '</li></ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Personnel Actions </h4>';
                 if(data[i].PersonnelActions !== null){
         listContent += '<ul>' + "- " + data[i].PersonnelActions + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Upcoming Events </h4>';
                 if(data[i].Upcoming !== null){
         listContent += '<ul>' + "- " + data[i].Upcoming + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Training </h4>';
         if(data[i].Training !== null){
                 listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Resource Request </h4>';
         if(data[i].ResourceRequest !== null){
         listContent += '<ul>' + "- " + data[i].ResourceRequest + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Support Request </h4>';
         if(data[i].SupportRequest !== null){
         listContent += '<ul>' + "- " + data[i].SupportRequest + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Travel/ODCs </h4>';
         if(data[i].TravelODC !== null){
         listContent += '<ul>' + "- " + data[i].TravelODC + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('#under_txt').text(' ');
  });
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekOf='+value+']').fadeIn();
  });
  
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
$("#btn").click(function () {
$("#printarea").printThis();
});

.container h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
 color: black;
 font-weight: bold;
 margin-bottom: 5px;
}
.container h1{
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: black;
  margin-bottom: 5px;
}
.container ul {
  list-style-type: none !important;
  padding: 0px !important;
  margin-left: 0px !important;
}
.container li{
    list-style-type: none !important;
}
span{
  font-size: 15px !important;
}
#report-summary{
  margin-left: 15px !important;
  margin-right: 15px !important;
}
#search{
  text-align: center !important;
}
p {
  text-align: center !important;
}
.container h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: 10px;
  margin-bottom: 10px;
  color: black;
}
#myInput{
  text-align: center !important;
}
#under_txt{
margin-left: 5px !important;
padding: 0px 10px 0px 10px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
<div id="search">
<input id="myInput" type="text" placeholder="Search for Week Of">
</div>

<input type="button" id="btn" value="Print">
<div id="printarea">
<h1>
Weekly Manager Report
</h1>
<p>Week Of<span id="under_txt"></span></p>
<ul id="report-summary">

</ul>
</div>
</div>

question from:https://stackoverflow.com/questions/66054073/div-getting-posted-inside-of-a-ul

Answer 1

The lazy way of solving this would be to strip out any associated HTML SharePoint might be passing down. Change your <ul> lines from something like this

  listContent += '<ul>' + "- " + data[i].Travel + '</ul>';

to this:

  listContent += '<ul>' + "- " + data[i].Travel.replace(/(<([^>]+)>)/gi, "") + '</ul>';

That replace syntax is taken from this article on stripping tags: https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/