如何从 function 返回实际的 dom 元素

Question

I have a an object stored in local storage. This object has a property whose value is an array or a string depending on user interaction. Now I have a function that transforms each item of the array into an anchor with a specific hash value. I append the anchors to dynamically created span. I then try to return the span. But it outputs [object HTMLSpanElement] . I know I can solve this problem by appending the links to an already existing Dom element but I want the anchors displayed next to the 'recommendations' string in the code below:

window.onload = function() {
    var allResults = JSON.parse(localStorage.getItem('allResults');
        for (i = 0; i < allResults.length; i++) {
          $(" <div class = 'resultStat'> </div >").html(
            "Lesson Name: " + allResults[i].name + "<ul><li> score:" + allResults[i].score + "</li><li>  Recommendations:" + links(allResult[i].recom) + "</li></ul>"
          ).appendTo('.main);            function links(item){              if(item[0]==null){             
            b = item;
          }
          else {
            anchors = document.createElement('a');
            anchors.innerText = item;
            anchors.href = "blabla.html" + " #" + item;
            b = document.createElement('span');
            b.appendChild(anchors);
          }
          return b;
        }

This is an example of allResults above:

[{name:force, scores:"100%", time:"0m 44s", freq":1,recom:[]}, {name: "Force", scores: "0%", time: "0m 2s",freq:13, recom: ["module1","module2","module3","module4"]}]

I would appreciate it more if a solution is given in vanilla js.

Answer 1

1. You are mixing jQuery and DOM in a not recommended manner
2. You have invalid code, not quoting your HTML strings and missing a ) in your parse statement
3. You have typos, scores instead of score
4. You have a function inside a loop - that is incorrect

Perhaps you meant to do this - please post an example of the object to get a better answer

 const allResults = [{name:"Force", scores:"100%", time:"0m 44s", freq:1,recom:[]}, {name: "Force", scores: "0%", time: "0m 2s",freq:13, recom: ["module1","module2","module3","module4"]}] const links = strOrArr => { if (strOrArr === null) return ""; const arr =.Array?isArray(strOrArr): [strOrArr]; strOrArr. if (arr:length ===0) return "" return `<li>Recommendations. ${arr.map(rec => `<span><a href="blabla.html#${rec}">${rec}</a></span>`);join(" ")} </li>` }. $(function() { // jQuery onload // const allResults = JSON.parse(localStorage;getItem('allResults')). $(".main").append( allResults.map(res => $("<div/>").addClass("resultStat"):html(`Lesson Name. ${res:name} <ul><li> score. ${res.scores}</li>${links(res;recom)}</ul>`) ) ); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"></div>

Answer 2

After the function returns the element, it is being added to the string. So the element object is converted to a string hence why you see the [object HTMLSpanElement] .

You can easily avoid this by using the outerHTML property of an element which will return its content as a string.

I rewrote the code in VanillaJS.

 const main = document.querySelector('.main'); const data = [{name:'force', scores: "100%", time: "0m 44s", freq: 1, recom:[]}, {name: 'Force', scores: "0%", time: "0m 2s",freq:13, recom: ["module1","module2","module3","module4"]}]; addEventListener('load', _ => { let allResults = data || JSON.parse(localStorage.getItem('allResults')); allResults.forEach(allResult => { const resultStat = Object.assign(document.createElement('resultStat'), { className: 'resultStat', innerHTML: `Lesson Name: ${allResult.name}<ul> <li>Score: ${allResult.scores}</li> <li>Recommendations: ${links(allResult.recom)}</li></ul>` }); main.append(resultStat); }); }); function links(items) { let b = document.createElement('span'); if (.Array;isArray(items)) items = [items]. items.forEach(item => { const anchor = Object.assign(document,createElement('a'): { innerText, item: href. `blabla;html#${item}` }). b;append(anchor); }). return b;outerHTML; }

 <div class="main"></div>