Why does function . text() in jQuery not have the expected behavior?

Question

I’m doing a web development for a joomla site.

When I do:

jQuery('.encomendas tbody').on('click', 'td.details-control', function () {                
    $(this).toggleClass('diminuir');
    if ($(this).hasClass('diminuir'))
        $(this).innerHTML = '-';
    else
        $(this).innerHTML = '+';

    // ...
});

This works, i.e., I select an element in jQuery and change the value of the property innerHTML javascript.

Before I was using the method .text()

$(this).toggleClass('diminuir');
if ($(this).hasClass('diminuir'))
    $(this).text('-');
else
    $(this).text('+');

Always got the bug,

uncaught typeerror $(...). text is not a Function

I spent hours trying to understand this behavior, without result. Until I tried to stupidly use the innerHTML and it worked.

What is wrong?

Answer 1

There is absolutely nothing wrong. Note that if you want to change the HTML of the element, the function you should use is html() and not text().

I’m surprised you can use the field innerHTML in a jQuery element. I’m a little rusty, but I believe that shouldn’t be possible, because a jQuery element is not the same thing as the "raw DOM element".

You need to make sure that $(this) is really a jQuery element.

See an example analogous to yours below. Including a field test innerHTML.

$('.encomendas tbody').on('click', 'td.details-control', function () {       
    $(this).text('+')
})

$('.encomendas tbody').on('click', 'td.details-control2', function () {           
    $(this).html('++')    
})

$('.teste').on('click', function () {           
    console.log($(this).innerHTML)
    console.log($(this).get(0).innerHTML)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table class='encomendas'>
  <thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <thead>
  <tbody>
  <tr>
    <td class='details-control'>Item 1 - A</td>
    <td class='details-control2'>Item 1 - B</td>
  </tr>
  </tbody>
</table>

<br>
<button class='teste'>Teste innerHTML</button>