Не верно заполняется таблица table

Есть json-массив из которого нужно заполнить таблицу:

data: Array(2)
0: {name: "999", cityName: "Бург", streetName: "Советская", houseName: "33"}
1: {name: "222", cityName: "Ростоши", streetName: "Ростошинская_2", houseName: "21"}
length: 2

Tаблица:

<table class="table" id="pollingStationsTable">
    <thead>
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.Station)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.City)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Street)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.House)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td></td>
                <td>
                    @Html.DisplayFor(modelItem => item.Station.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.City.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Street.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.House.Name)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.IdPollingStation">Править</a> |
                    <a asp-action="Delete" asp-route-id="@item.IdPollingStation">Удалить</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Как я пытаюсь это сделать:

dataFillingTableBody(dataSort, 'pollingStationsTable');

function dataFillingTableBody(data, idObjectTable) {

    var table = document.getElementById(idObjectTable);

    $('#'+idObjectTable + ' tbody > tr').remove();

    for (let i = 0; i < data.length; i++) {

        table.append(createRow(data[i]));
    }

}

function createRow(data) {

    var trElement = '<tr>';

    for (key in data) {

        trElement += '<td>' + data[key] + '</td>';
    }
    trElement += '</tr>';

    return trElement;
}

Но это не работает - он просто добавляет текст в таблицу (текст с тегами, всё в одну кучу).

Подскажите как можно исправить код, чтобы заполнялось как нужно и добавлялись в последнею колонку ссылки? Ссылки:

<td>
                    <a asp-action="Edit" asp-route-id="@item.IdPollingStation">Править</a> |
                    <a asp-action="Delete" asp-route-id="@item.IdPollingStation">Удалить</a>
                </td>