javascript innerHTMLを使用して注入用にHTMLをサニタイズしますか？

Question

listStrの中に墨塗りされたhtmlを持つ関数を修正する必要がありますが、さまざまなHTMLエスケープ関数（listDom.innerHTML = escapeHTML(listStr);）を試しましたが、要素の代わりに生のテキストを出力します!!

function createList(list) { 
     let listStr = ""; 

     list.forEach(function (item) { 

      if (item.click) { 
       var clean_url = encodeURIComponent(item.href); 
       clean_url = ""; 
       //console.log(clean_url); 
       listStr += `<div class='list_item' id="${item.uid}"><a href="javascript:void(0);">${item.label}</a></div>`; 

      } else { 
       //'loop', i + '' 
       listStr += `<div class='list_item' id="${item.uid}" loop="${item.loop}"><a href="${item.href}">${item.label}</a></div>`; 
      } 
     }); 

     listStr += ''; 

     let listDom = document.createElement("div"); 
     listDom.setAttribute("id", "list"); 
     listDom.setAttribute("style", "display: none;"); 
     listDom.innerHTML = listStr; 

     return listDom; 
    } 

Answer 1

私はこのようにそれをやってしまった：

   let listItem = document.createElement('div'); 
       listItem.setAttribute('class', 'list_item'); 
       listItem.setAttribute('id', item.uid); 

       let linkItem = document.createElement('a'); 
       linkItem.setAttribute('href', 'javascript:void(0);'); 
       linkItem.innerText = item.label; 

       listItem.appendChild(linkItem); 
       listStr.appendChild(listItem);