I am trying to get a child element inside a div. I am able to get the div by matching the data attribute but I am struggling to get the child element, in this case <h6>. Can anyone tell me how to do that?
$('.marker-tooltip-container section').filter('[data-locationid="' + location.id + '"]').('h6').text(val);
You problem arise due to incorrect syntax .('h6')
You can simplify your selector as
$('.marker-tooltip-container section[data-locationid="' + location.id + '"] h6').text(val);
OR
$('.marker-tooltip-container section').filter('[data-locationid="' + location.id + '"]').find('h6').text(val);
Upate your code to
$($('.marker-tooltip-container section').filter('[data-locationid="' + location.id + '"]').find('h6')[0]).text(val);
Basically to get the h6 element in your case in place of .('h6'), you need to use .find('h6'). This will give you all the h6 nodes, hence, to update, first node you have to use .find('h6')[0]. However, if there is only 1 node or you want to update all the nodes, simply, use .find('h6')
Additionally, you can also try with this as well. The above rules applies here as well.
$('.marker-tooltip-container section[data-locationid="' + location.id + '"] h6').text(val);
[0] unless you want to select first element. as $('.marker-tooltip-container section').filter('[data-locationid="' + location.id + '"]').find('h6') is already jQuery object so you can directly use .text() method