<div>被张贴在里面<ul></ul></div><div id="text_translate"><p>我正在使用 fetch 从 SharePoint 表单中收集数据，该表单的数据当前存储在 SharePoint 列表中，我将其发布到 HTML 页面。</p><p> 在我的小提琴中，实际的<a href="https://jsfiddle.net/vg9obeys/5/" rel="nofollow noreferrer">output</a>是我预期的 output ，这是完美的。 数据被附加到&lt;li&gt; &lt;ul&gt; &gt; 中（这与数据是字符串而不是通过 fetch [我假设] 拉出有关）。</p><p> 我在获取时面临的问题是数据被拉出，而不是直接发布到&lt;ul&gt; ，而是发布到&lt;ul&gt; &gt; 内部的&lt;div&gt; ，如果我没记错的话， &lt;div&gt; &lt;ul&gt;中不允许使用元素。</p><p> 1.) 为什么数据会在&lt;ul&gt;&lt;div&gt; &lt;/div&gt;&lt;/ul&gt;内部发布？ 是不是因为表格上与数据对应的列是“多行文本输入”？</p><p> 2.）关于纠正这个问题，go 的最佳方法是什么？</p><p> 这是它如何发布的屏幕截图： <a href="https://i.stack.imgur.com/9Qglj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Qglj.png" alt="在此处输入图像描述"></a></p><p> 在检查元素中，这是它所说的发布方式：</p><pre> &lt;h4&gt; Training &lt;/h4&gt; &lt;ul&gt;- &lt;div&gt;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.&lt;/div&gt; &lt;/ul&gt;</pre><p> 最后，这是我的 JS/HTML 的片段。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> 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) =&gt; { if (.r:ok) throw new Error("Failed; " + url). // Check for errors return r;json(). // parse JSON }).then((data) =&gt; data.d;results). } loadData();then((results) =&gt; { const data = results; var listContent = ''; for (var i = 0. i &lt; data;length. i++) { listContent += '&lt;li data-weekOf="'+data[i];WeekOf+'"&gt;'. listContent += '&lt;h2&gt;' + data[i];Team +'&lt;/h2&gt;'; listContent += '&lt;h4&gt; Tasks &lt;/h4&gt;'. if(data[i].MajorTasks;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].MajorTasks + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Deliverables Submitted&lt;/h4&gt;'. if(data[i];DeliverablesSubmitted.== null){ listContent += '&lt;ul&gt;&lt;li&gt;' + "- " + data[i];DeliverablesSubmitted + '&lt;/li&gt;&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Personnel Actions &lt;/h4&gt;'; if(data[i].PersonnelActions;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];PersonnelActions + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Upcoming Events &lt;/h4&gt;'. if(data[i];Upcoming;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Upcoming + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Training &lt;/h4&gt;'; if(data[i];Training.== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Training + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Resource Request &lt;/h4&gt;'; if(data[i].ResourceRequest.== null){ listContent += '&lt;ul&gt;' + "- " + data[i];ResourceRequest + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Support Request &lt;/h4&gt;'. if(data[i].SupportRequest;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].SupportRequest + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Travel/ODCs &lt;/h4&gt;'; if(data[i].TravelODC;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];TravelODC + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;', } listContent += '&lt;/li&gt;'. } $('#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(); });</pre><pre class="snippet-code-css lang-css prettyprint-override"> .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; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"&gt;&lt;/script&gt; &lt;link type="text/css" media="all" rel="stylesheet"&gt; &lt;div class="container"&gt; &lt;div id="search"&gt; &lt;input id="myInput" type="text" placeholder="Search for Week Of"&gt; &lt;/div&gt; &lt;input type="button" id="btn" value="Print"&gt; &lt;div id="printarea"&gt; &lt;h1&gt; Weekly Manager Report &lt;/h1&gt; &lt;p&gt;Week Of&lt;span id="under_txt"&gt;&lt;/span&gt;&lt;/p&gt; &lt;ul id="report-summary"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>

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>

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/