Thanks for opening this question and help me!

I am using JQuery DataTable and want to update the InnerHTML in each cell. The reason is that that:

Original data in each DataTable Cell is plain text and hard to read. For example:

[ { "wikidataid": "Q142" }, { "wikidataid": "Q55" }, { "wikidataid": "Q39" }, { "wikidataid": "Q34" }, { "wikidataid": "Q36" }, { "wikidataid": "Q20" } ]

So, I want to create an unordered list so the data could be show in a formatted way instead of a plain text and override the innerHTML of dataTable cells.

This is the code I wrote:

        var table = $('#queryTable').DataTable();
        var data = table.rows().data();
        console.log(data.length);

        //Loop each row
        data.each(function (value, index) {
            //Loop each column
            for(var i=0; i<value.length; i++){
                // only column 2 and 3 are the data we want to format
                if (i != 2 && i != 3){
                    continue;
                }
                var content = JSON.parse(value[i])

                var ul=document.createElement('ul');
                for (var k = 0; k < content.length; ++k) {
                    var li=document.createElement('li');
                    li.setAttribute("class", "list");

                    li.innerHTML = "WikiDataId: " + content[k].wikidataid;   // Use innerHTML to set the text
                    if (content[k].attributes != null) {
                        for (var j = 0; j < content[k].attributes.length; ++j){
                            var ulsub=document.createElement('ul');
                            ulsub.value = content[k].attributes[j].changedtype;
                            var liName=document.createElement('li');
                            liName.innerHTML = content[k].attributes[j].name + ": " + content[k].attributes[j].value;
                            ulsub.appendChild(liName);
                            li.appendChild(ulsub);
                        }
                    }
                    ul.appendChild(li);
                }
                // console.log(index);
                // console.log(i);
                // console.log(ul);
                //table.cell(index, i).data(ul.html()).draw();

                table.cell(index, i).node().innerHTML = null;
                table.cell(index, i).node().appendChild(ul);

                console.log(table.cell(index, i).node());
            };
        });
    });

However, after I run the above code, although the data is formatted into unordered list. But the data in the each row's cells are not updated correctly. For example, the 1st row's data contains the 3rd rows data, the 2rd row's data contains the 5th rows data, the 3rd row's data contains the 6th rows data and etc.

I am not sure if the way I update inner html is correct. Could anyone help here? Thanks so much!