Sanitize html for injection using javascript innerHTML?

Question

Need to fix the function below to have sanitized html inside listStr, tried various HTML escaping function (listDom.innerHTML = escapeHTML(listStr);) but I get raw text as output instead of element !!

    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

I ended up doing it like this :

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