<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 ，這是完美的。數據被附加到<li> <ul> > 中（這與數據是字符串而不是通過 fetch [我假設] 拉出有關）。</p><p> 我在獲取時面臨的問題是數據被拉出，而不是直接發布到<ul> ，而是發布到<ul> > 內部的<div> ，如果我沒記錯的話， <div> <ul>中不允許使用元素。</p><p> 1.) 為什么數據會在<ul><div> </div></ul>內部發布？是不是因為表格上與數據對應的列是“多行文本輸入”？</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> <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></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) => { 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(); });</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"> <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></pre></div></div><p></p></div>

Question

我正在使用 fetch 從 SharePoint 表單中收集數據，該表單的數據當前存儲在 SharePoint 列表中，我將其發布到 HTML 頁面。

在我的小提琴中，實際的output是我預期的 output ，這是完美的。 數據被附加到<li> <ul> > 中（這與數據是字符串而不是通過 fetch [我假設] 拉出有關）。

我在獲取時面臨的問題是數據被拉出，而不是直接發布到<ul> ，而是發布到<ul> > 內部的<div> ，如果我沒記錯的話， <div> <ul>中不允許使用元素。

1.) 為什么數據會在<ul><div> </div></ul>內部發布？ 是不是因為表格上與數據對應的列是“多行文本輸入”？

2.）關於糾正這個問題，go 的最佳方法是什么？

這是它如何發布的屏幕截圖：

在檢查元素中，這是它所說的發布方式：

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

最后，這是我的 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

解決此問題的懶惰方法是刪除任何相關的 HTML SharePoint 可能正在傳遞。 從這樣的東西改變你的<ul>行

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

對此：

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

該替換語法取自這篇關於剝離標簽的文章： https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/

問題描述

1 個解決方案

解決方案1
1 已采納 2021-02-04 21:38:54

問題描述

1 個解決方案

解決方案1 1 已采納 2021-02-04 21:38:54

解決方案1
1 已采納 2021-02-04 21:38:54