<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