How can I convert this innerhtml loop to a innertext one because XSS vulnerabilities?

Question

I need to convert this loop to innertext with the dynamically added content how can I do that I looked on the internet but could'nt find anything?

function showMessages(messages) {

    jsonMessages.innerHTML = "<tr><th>Naam</th><th>Bericht</th><th>Datum</th></tr>";

        messages.sort(function (a, b) {
            return a.created_at > b.created_at ? 1 : -1;
        });
        for (var i = 0; i < messages.length; i++) {
            jsonMessages.innerHTML +=  `<tr><td>${messages[i].user_id}</td><td>${messages[i].content.replace(/</g,"&lt;")}</td><td>${messages[i].created_at}</td></tr>`;
        }
    console.log(messages);
}

Answer 1

function showMessages(messages) {

    jsonMessages.innerHTML = "<tr><th>Naam</th><th>Bericht</th><th>Datum</th></tr>";

        messages.sort(function (a, b) {
            return a.created_at > b.created_at ? 1 : -1;
        });

        for (var i = 0; i < messages.length; i++) {

           var mainTr = document.createElement('tr');
           var td1 = document.createElement('td').appendChild(document.createTextNode(messages[i].user_id));
           var td2 = document.createElement('td').appendChild(document.createTextNode(messages[i].content.replace(/</g,"&lt;")));;
           var td3 = document.createElement('td').appendChild(document.createTextNode(messages[i].created_at));

           mainTr.appendChild(td1);
           mainTr.appendChild(td2);
           mainTr.appendChild(td3);

           jsonMessages.appendChild(mainTr);

        }
    console.log(messages);
}