Dynamic dom element in LWC JavaScript

Question

I am trying to build a table dynamically from the javascript which runs is already in Aura component.

tableBody = tableBody + '<tr>';
tableBody = tableBody + '<td><a href="javascript:void(0)" id="' + datas[i].Id + '" data-recname ="' + 
            datas[i].Name + '"  onclick="selectedRow(this)">' + datas[i].Name + '</a></td>';

When I tried to build the same in LWC javascript as

<td><input type="checkBox" data-selectedrec="'+data[i]['Id']+'" onclick="{selectedRow}"></input> </td>

Dom gets created and getting an checkbox input but onclick function is not getting added in the DOM. What am I missing here?

Answer 1

If you want to build elements properly, you need to use document.createElement and Element.addEventListener. If you don't want to do this manually, you should be able to import jQuery and do it that way. The reason why you can't just innerHTML events is because such methods may be able to bypass Locker Service restrictions.