jquery - Selectors not selecting children nor contents when doing an Ajax callback

Question

Hi,

I want to get the contents out of 2 divs on a page that looks like this:

<div id="mainDiv">some pears</div>
<div id="subDiv">some apples</div>

i tried this code:

let $data = $(data);
var $pears = $data.filter("#mainDiv");
var $apples = $data.filter("#subDiv");

$("#cont1").html($pears);
$("#cont2").html($apples);

but this is importing the containers as well which I dont need, only the contents so I tried:

var $pears = $data.filter("#mainDiv > *");

but now nothing is being imported. Why is that?

Thank you.

Answer 1

There are no elements inside the ones shown so using the selector "#mainDiv > *" returns no matches. Text nodes are not considered elements

Try just getting the inner html instead

var pears = $data.filter("#mainDiv").html();
$("#cont1").html(pears);