jQuery append not working on custom lightning component

Question

I have a custom component that sets a table header and body dynamically with jQuery append but it's not working.

I have loaded my scripts into .cmp and it's working cause I start my onInit controller method when these are loaded successfully.

This is what one of my header/body responses look like:

Header:

<tr class="slds-line-height_reset">
<th>
    <div class="slds-truncate">
    </div>
</th>
<th class="tmTableHeader" scope="col">
    <div class="slds-truncate">
        <lightning:input type="toggle" label="Test header 1" name="1-0" checked="false" onchange="{!c.checkFullColumn}"/>
    </div>
</th>
<th class="tmTableHeader" scope="col">
    <div class="slds-truncate">
        <lightning:input type="toggle" label="Test header 2" name="1-1" checked="false" onchange="{!c.checkFullColumn}"/>
    </div>
</th>

Body:

<tr class="slds-hint-parent">
<td style="width:30%">
    <div class="slds-truncate">Test text</div>
</td>
<td>
    <div class="slds-truncate">
        <lightning:input type="toggle" name="1-0" checked="false" onchange="{!c.handleToggleElement}"/>
    </div>
</td>
<td>
    <div class="slds-truncate">
        <lightning:input type="toggle" name="1-1" checked="false" onchange="{!c.handleToggleElement}"/>
    </div>
</td>

And here are my .cmp and .controller function

.cmp:

<table class="slds-table slds-table_cell-buffer">
    <thead id ="concesionarioHeader">

    </thead> 
    <tbody id ="concesionarioBody">

    </tbody>
</table>

.controller (headerHTML and bodyHTML are string variables):

$('#concesionarioHeader').append(headerHTML);
$('#concesionarioBody').append(bodyHTML);

If I try hardcoding my headerHTML and bodyHTML into my .cmp it works but it's failing when trying from $().append. Also if I debug $('#concesionarioHeader') and $('#concesionarioBody') both have references found.

Is there a way to fix this? Or do I have to make a different approach to set my table header and body with these string values?

Answer 1

When you are not using native lightning javascript APIs to get elements from DOM (like jQuery), it will cross the component boundary and get all the elements matching the identifications. For example, when you are loading same table component twice with different data, then there will be 2 concesionarioBody tbody's present in window and when you add a row from any component, it will be added in both the components. To avoid this situation, you can use $(component.find('concesionarioBody').getElement()) which will not cross component boundary and give the tbody in same component. Below is the working example:

cmp file:

<div class="slds-theme_default">
    <lightning:button label="Add Row" onclick="{!c.addRow}" />
    <table class="slds-table slds-table_cell-buffer">
        <thead aura:id="concesionarioHeader">
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead> 
        <tbody aura:id ="concesionarioBody">

        </tbody>
    </table>
</div>

controller.js:

addRow : function(component, event, helper){
    $(component.find('concesionarioBody').getElement()).append('<tr><td>101</td><td>My Name</td></tr>');
}