Locker Service With Inner html tag issue

Question

I have below code where i am trying to display data in a table format based the html element stored in a field.

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead aura:id="t1"></thead>
    <tbody aura:id="t2"></tbody>
</table>

var t1 = component.find("t1");
var t2 = component.find("t2");
var thead= '', tbody= '';
for (var i = 0, listLength = tableRowList.length; i < listLength; i++) {
    if (tableRowList[i].IsHeader__c) {
        thead=thead+tableRowList[i].Row__c;
    } else {
        tbody=tbody+tableRowList[i].Row__c;
    }
}
t1.getElement().innerHTML += thead;
t2.getElement().innerHTML += tbody;
console.log('@@@@',t1.getElement().innerHTML);

With locker service enabled org, the innerHtml tag is removing the html elements in the data and trying to display the text value.

Any solution for above problem?

Answer 1

Something like this works:

$A.createComponent("aura:html", {"tag":"th", "body":"My Header", "HTMLAttributes":{"id":"myFirstTH"}},
            function(newCmp, status) {
                // Push newCmp to v.body of existing component
                var t1 = component.find("t1");
                t1.set("v.body",newCmp);
            }
        );

Although if you have HTML elements in the body it gets more complicated but this will add the TH element to the t1 element as an example