jQuery selector to determine 'or'?

Question

Let's say my HTML may look one of two ways:

Option 1:

<h2>My header
    <span class="apple">My Span</span>
</h2>

Option 2:

<h2>My header</h2>

Via jAuery, I want to append a span to either the nested span (if it's there) or to the header directly, resulting in one of these:

Option 1:

<h2>My header
    <span class="apple">My Span
        <span>My Span Inserted via jQuery</span>
    </span>
</h2>

Option 2:

<h2>My header
    <span>My Span Inserted via jQuery</span>
</h2>

Is there a clever selector that would detect both of the above scenarios? I could, of course, first check to see if my header has a span with a class of 'apple' within it. If so, do this, else, do that. I was wondering if there was a more elegant and less verbose solution, though.

Answer 1

I think using a children filter and then andSelf() would work to get both. You could then use the first to choose the correct one. If children is empty then first will be the only element, that is, the header.

$('h2').each( function() {
    $(this).children('span')
           .andSelf()
           .filter(':first')
           .append('<span>My Span Inserted via JQuery</span>');
});

Updated to use filter() (instead of the second find).

Answer 2

The following selector selects all <h2>'s that does not have a <span> element or a <span> element which has <h2> as parent.

$("h2:not(:has(span)), h2 > span")
      .append("<span>My Span Inserted via jQuery</span>");