What is the difference between $("#id div") and $("#id > div")?

Question

I'm confused with these two.

I have a table structure like following;

<div id="previewSection">
  <table>
    <tbody>
      <tr>
        <td>
          <div>X
          </div>
        </td>
        <td>
          <div>Y
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I'm prepend something in the table with Jquery. Now when I'm doing $("#previewSection div") it gives me something like m.fn.init[253] but when I call $("#previewSection > div") actually gives me the html like this [<div>​…​</div>​] which I originally wanted.

I've checked JQuery selectors and it said if I use > it gives direct child of the selector and if I don't use it all div of the selector; but both should give me the html why I'm getting objects?? Thank you in advance.

Answer 1

The difference between X Y and X > Y is that the latter will only select children (immediate descendants) of X.

Given this little snippet:

<div>
  <a>
    <span></span>
  </a>
</div>

div a       - works
div span    - works
div > a     - works
div > span  - nope, no span is an immediate descendant (child) of a div